diff --git a/.env b/.env
new file mode 100644
index 0000000..55fbf2e
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:8000
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..737d872
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/.history/.env_20220518143812 b/.history/.env_20220518143812
new file mode 100644
index 0000000..e69de29
diff --git a/.history/.env_20220518143858 b/.history/.env_20220518143858
new file mode 100644
index 0000000..55fbf2e
--- /dev/null
+++ b/.history/.env_20220518143858
@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:8000
\ No newline at end of file
diff --git a/.history/.env_20220518144051 b/.history/.env_20220518144051
new file mode 100644
index 0000000..55fbf2e
--- /dev/null
+++ b/.history/.env_20220518144051
@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:8000
\ No newline at end of file
diff --git a/.history/README_20220710205803.md b/.history/README_20220710205803.md
new file mode 100644
index 0000000..c87e042
--- /dev/null
+++ b/.history/README_20220710205803.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/.history/README_20220710210115.md b/.history/README_20220710210115.md
new file mode 100644
index 0000000..471602a
--- /dev/null
+++ b/.history/README_20220710210115.md
@@ -0,0 +1 @@
+Сайт для сервиса доставки пиццы.
diff --git a/.history/components/Block/Pizza/index_20220516233309.tsx b/.history/components/Block/Pizza/index_20220516233309.tsx
new file mode 100644
index 0000000..2694f9e
--- /dev/null
+++ b/.history/components/Block/Pizza/index_20220516233309.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../redux/cart/selectors';
+import { CartItem } from '../../redux/cart/types';
+import { addItem } from '../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/Block/Pizza/index_20220518134250.tsx b/.history/components/Block/Pizza/index_20220518134250.tsx
new file mode 100644
index 0000000..c576de2
--- /dev/null
+++ b/.history/components/Block/Pizza/index_20220518134250.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../redux/cart/selectors';
+import { CartItem } from '../../../redux/cart/types';
+import { addItem } from '../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/Block/Stock/Skeleton_20220518134317.tsx b/.history/components/Block/Stock/Skeleton_20220518134317.tsx
new file mode 100644
index 0000000..a6410f2
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518134317.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const Skeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518134633.tsx b/.history/components/Block/Stock/Skeleton_20220518134633.tsx
new file mode 100644
index 0000000..bef630a
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518134633.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518140827.tsx b/.history/components/Block/Stock/Skeleton_20220518140827.tsx
new file mode 100644
index 0000000..846442a
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518140827.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518140848.tsx b/.history/components/Block/Stock/Skeleton_20220518140848.tsx
new file mode 100644
index 0000000..1ed08d5
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518140848.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518140912.tsx b/.history/components/Block/Stock/Skeleton_20220518140912.tsx
new file mode 100644
index 0000000..5df8cf8
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518140912.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="0" ry="0" width="280" height="230" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141002.tsx b/.history/components/Block/Stock/Skeleton_20220518141002.tsx
new file mode 100644
index 0000000..469632b
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141002.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="0" ry="0" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141016.tsx b/.history/components/Block/Stock/Skeleton_20220518141016.tsx
new file mode 100644
index 0000000..c06bd00
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141016.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141117.tsx b/.history/components/Block/Stock/Skeleton_20220518141117.tsx
new file mode 100644
index 0000000..7bcdd99
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141117.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141132.tsx b/.history/components/Block/Stock/Skeleton_20220518141132.tsx
new file mode 100644
index 0000000..abe7781
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141132.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141143.tsx b/.history/components/Block/Stock/Skeleton_20220518141143.tsx
new file mode 100644
index 0000000..168cc38
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141143.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={345}
+    height={345}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141305.tsx b/.history/components/Block/Stock/Skeleton_20220518141305.tsx
new file mode 100644
index 0000000..6a1d6a4
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141305.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141344.tsx b/.history/components/Block/Stock/Skeleton_20220518141344.tsx
new file mode 100644
index 0000000..6a1d6a4
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141344.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141511.tsx b/.history/components/Block/Stock/Skeleton_20220518141511.tsx
new file mode 100644
index 0000000..5b83597
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141511.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141527.tsx b/.history/components/Block/Stock/Skeleton_20220518141527.tsx
new file mode 100644
index 0000000..154843c
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141527.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141538.tsx b/.history/components/Block/Stock/Skeleton_20220518141538.tsx
new file mode 100644
index 0000000..76aea59
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141538.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141558.tsx b/.history/components/Block/Stock/Skeleton_20220518141558.tsx
new file mode 100644
index 0000000..9b78817
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141558.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141617.tsx b/.history/components/Block/Stock/Skeleton_20220518141617.tsx
new file mode 100644
index 0000000..92de88b
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141617.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={345}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141623.tsx b/.history/components/Block/Stock/Skeleton_20220518141623.tsx
new file mode 100644
index 0000000..9b78817
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141623.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141626.tsx b/.history/components/Block/Stock/Skeleton_20220518141626.tsx
new file mode 100644
index 0000000..c1e30a7
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141626.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="20" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141636.tsx b/.history/components/Block/Stock/Skeleton_20220518141636.tsx
new file mode 100644
index 0000000..9b78817
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141636.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141647.tsx b/.history/components/Block/Stock/Skeleton_20220518141647.tsx
new file mode 100644
index 0000000..43be022
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141647.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10"  height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141658.tsx b/.history/components/Block/Stock/Skeleton_20220518141658.tsx
new file mode 100644
index 0000000..82e383b
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141658.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="345" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141705.tsx b/.history/components/Block/Stock/Skeleton_20220518141705.tsx
new file mode 100644
index 0000000..f43035d
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141705.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="445" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141713.tsx b/.history/components/Block/Stock/Skeleton_20220518141713.tsx
new file mode 100644
index 0000000..25fb44c
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141713.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="45" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141721.tsx b/.history/components/Block/Stock/Skeleton_20220518141721.tsx
new file mode 100644
index 0000000..bd0a2b6
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141721.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="pizza-block"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="45" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141738.tsx b/.history/components/Block/Stock/Skeleton_20220518141738.tsx
new file mode 100644
index 0000000..ddf6145
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141738.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="45" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141751.tsx b/.history/components/Block/Stock/Skeleton_20220518141751.tsx
new file mode 100644
index 0000000..dd939c2
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141751.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141809.tsx b/.history/components/Block/Stock/Skeleton_20220518141809.tsx
new file mode 100644
index 0000000..dd939c2
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141809.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141817.tsx b/.history/components/Block/Stock/Skeleton_20220518141817.tsx
new file mode 100644
index 0000000..70580e0
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141817.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141843.tsx b/.history/components/Block/Stock/Skeleton_20220518141843.tsx
new file mode 100644
index 0000000..5ec2c59
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141843.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className={classNames('card_stock ')}
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518141856.tsx b/.history/components/Block/Stock/Skeleton_20220518141856.tsx
new file mode 100644
index 0000000..95695dc
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518141856.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className={classNames('card_stock color_green')}
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518142016.tsx b/.history/components/Block/Stock/Skeleton_20220518142016.tsx
new file mode 100644
index 0000000..92fee38
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518142016.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144636.tsx b/.history/components/Block/Stock/Skeleton_20220518144636.tsx
new file mode 100644
index 0000000..79127e8
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144636.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144700.tsx b/.history/components/Block/Stock/Skeleton_20220518144700.tsx
new file mode 100644
index 0000000..4fb8343
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144700.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+ <></>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144716.tsx b/.history/components/Block/Stock/Skeleton_20220518144716.tsx
new file mode 100644
index 0000000..2078818
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144716.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144726.tsx b/.history/components/Block/Stock/Skeleton_20220518144726.tsx
new file mode 100644
index 0000000..79127e8
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144726.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144743.tsx b/.history/components/Block/Stock/Skeleton_20220518144743.tsx
new file mode 100644
index 0000000..da736ce
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144743.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+>
+
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144754.tsx b/.history/components/Block/Stock/Skeleton_20220518144754.tsx
new file mode 100644
index 0000000..58b04fc
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144754.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+  >
+
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144829.tsx b/.history/components/Block/Stock/Skeleton_20220518144829.tsx
new file mode 100644
index 0000000..5b145e4
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144829.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+
+  >
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144838.tsx b/.history/components/Block/Stock/Skeleton_20220518144838.tsx
new file mode 100644
index 0000000..4a47c01
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144838.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+
+
+  >
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144904.tsx b/.history/components/Block/Stock/Skeleton_20220518144904.tsx
new file mode 100644
index 0000000..0ed163b
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144904.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144928.tsx b/.history/components/Block/Stock/Skeleton_20220518144928.tsx
new file mode 100644
index 0000000..abd511c
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144928.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="245" ry="245" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518144947.tsx b/.history/components/Block/Stock/Skeleton_20220518144947.tsx
new file mode 100644
index 0000000..60ae2c8
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518144947.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="245" ry="245" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145011.tsx b/.history/components/Block/Stock/Skeleton_20220518145011.tsx
new file mode 100644
index 0000000..60ae2c8
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145011.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="245" ry="245" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145240.tsx b/.history/components/Block/Stock/Skeleton_20220518145240.tsx
new file mode 100644
index 0000000..16bb75e
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145240.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+   <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+    <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145319.tsx b/.history/components/Block/Stock/Skeleton_20220518145319.tsx
new file mode 100644
index 0000000..0a62aaf
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145319.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+  <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+    <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+    <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145331.tsx b/.history/components/Block/Stock/Skeleton_20220518145331.tsx
new file mode 100644
index 0000000..2cfff8a
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145331.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145343.tsx b/.history/components/Block/Stock/Skeleton_20220518145343.tsx
new file mode 100644
index 0000000..062da10
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145343.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="42" y="77" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145349.tsx b/.history/components/Block/Stock/Skeleton_20220518145349.tsx
new file mode 100644
index 0000000..a2bff79
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145349.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="77" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145401.tsx b/.history/components/Block/Stock/Skeleton_20220518145401.tsx
new file mode 100644
index 0000000..1b77afb
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145401.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145408.tsx b/.history/components/Block/Stock/Skeleton_20220518145408.tsx
new file mode 100644
index 0000000..a1cc0d3
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145408.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145422.tsx b/.history/components/Block/Stock/Skeleton_20220518145422.tsx
new file mode 100644
index 0000000..56fcd43
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145422.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="100" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145444.tsx b/.history/components/Block/Stock/Skeleton_20220518145444.tsx
new file mode 100644
index 0000000..c3151b1
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145444.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="100" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145458.tsx b/.history/components/Block/Stock/Skeleton_20220518145458.tsx
new file mode 100644
index 0000000..8d0458f
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145458.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145509.tsx b/.history/components/Block/Stock/Skeleton_20220518145509.tsx
new file mode 100644
index 0000000..6cf00a4
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145509.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145642.tsx b/.history/components/Block/Stock/Skeleton_20220518145642.tsx
new file mode 100644
index 0000000..5b3ba1f
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145642.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <>
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+  </>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145708.tsx b/.history/components/Block/Stock/Skeleton_20220518145708.tsx
new file mode 100644
index 0000000..6cf00a4
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145708.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145737.tsx b/.history/components/Block/Stock/Skeleton_20220518145737.tsx
new file mode 100644
index 0000000..35bd15e
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145737.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+ 
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Skeleton_20220518145757.tsx b/.history/components/Block/Stock/Skeleton_20220518145757.tsx
new file mode 100644
index 0000000..5cdbf2b
--- /dev/null
+++ b/.history/components/Block/Stock/Skeleton_20220518145757.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/Block/Stock/Stock_20220517171533.tsx b/.history/components/Block/Stock/Stock_20220517171533.tsx
new file mode 100644
index 0000000..8504ccc
--- /dev/null
+++ b/.history/components/Block/Stock/Stock_20220517171533.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CardStock: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <div className={classNames('card_stock', color)}>
+            <div className={'title_box'}>
+                <p className={'title'}>{title_one}</p>
+                <p className={'title'}>{title_two}</p>
+            </div>
+            <div className = {classNames('img', img)}/>
+            <div className={'sale_box'}>
+                <p>{sale}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/Block/Stock/Stock_20220518142538.tsx b/.history/components/Block/Stock/Stock_20220518142538.tsx
new file mode 100644
index 0000000..be2146d
--- /dev/null
+++ b/.history/components/Block/Stock/Stock_20220518142538.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    id: number;
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CardStock: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <div className={classNames('card_stock', color)}>
+            <div className={'title_box'}>
+                <p className={'title'}>{title_one}</p>
+                <p className={'title'}>{title_two}</p>
+            </div>
+            <div className = {classNames('img', img)}/>
+            <div className={'sale_box'}>
+                <p>{sale}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/Block/Stock/skeleton_20220518134307.tsx b/.history/components/Block/Stock/skeleton_20220518134307.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/Block/Stock/skeleton_20220518134318.tsx b/.history/components/Block/Stock/skeleton_20220518134318.tsx
new file mode 100644
index 0000000..a6410f2
--- /dev/null
+++ b/.history/components/Block/Stock/skeleton_20220518134318.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const Skeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/Customer/Header_20220518151433.tsx b/.history/components/Customer/Header_20220518151433.tsx
new file mode 100644
index 0000000..f01ca2b
--- /dev/null
+++ b/.history/components/Customer/Header_20220518151433.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Customer/Search';
+import { selectCart } from '../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/Customer/Header_20220518151447.tsx b/.history/components/Customer/Header_20220518151447.tsx
new file mode 100644
index 0000000..d150df2
--- /dev/null
+++ b/.history/components/Customer/Header_20220518151447.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/Customer/Search/index_20220516232008.tsx b/.history/components/Customer/Search/index_20220516232008.tsx
new file mode 100644
index 0000000..0a963b1
--- /dev/null
+++ b/.history/components/Customer/Search/index_20220516232008.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};
diff --git a/.history/components/Customer/Search/index_20220518151434.tsx b/.history/components/Customer/Search/index_20220518151434.tsx
new file mode 100644
index 0000000..7cbd19b
--- /dev/null
+++ b/.history/components/Customer/Search/index_20220518151434.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};
diff --git a/.history/components/Header_20220517160019.tsx b/.history/components/Header_20220517160019.tsx
new file mode 100644
index 0000000..c808132
--- /dev/null
+++ b/.history/components/Header_20220517160019.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Search';
+import { selectCart } from '../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/Header_20220518151434.tsx b/.history/components/Header_20220518151434.tsx
new file mode 100644
index 0000000..f01ca2b
--- /dev/null
+++ b/.history/components/Header_20220518151434.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Customer/Search';
+import { selectCart } from '../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/UI/ButtonImg_20220529001126.tsx b/.history/components/UI/ButtonImg_20220529001126.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/ButtonImg_20220529001133.tsx b/.history/components/UI/ButtonImg_20220529001133.tsx
new file mode 100644
index 0000000..7066ce8
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001133.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001136.tsx b/.history/components/UI/ButtonImg_20220529001136.tsx
new file mode 100644
index 0000000..30c115e
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001136.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001137.tsx b/.history/components/UI/ButtonImg_20220529001137.tsx
new file mode 100644
index 0000000..30c115e
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001137.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001155.tsx b/.history/components/UI/ButtonImg_20220529001155.tsx
new file mode 100644
index 0000000..5b87aa7
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001155.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001202.tsx b/.history/components/UI/ButtonImg_20220529001202.tsx
new file mode 100644
index 0000000..4321114
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001202.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, styles, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001207.tsx b/.history/components/UI/ButtonImg_20220529001207.tsx
new file mode 100644
index 0000000..eb8bf0a
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001207.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img,children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001213.tsx b/.history/components/UI/ButtonImg_20220529001213.tsx
new file mode 100644
index 0000000..39b69be
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001213.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img,children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001217.tsx b/.history/components/UI/ButtonImg_20220529001217.tsx
new file mode 100644
index 0000000..c71bf35
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001217.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001222.tsx b/.history/components/UI/ButtonImg_20220529001222.tsx
new file mode 100644
index 0000000..5e94386
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001222.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001224.tsx b/.history/components/UI/ButtonImg_20220529001224.tsx
new file mode 100644
index 0000000..5e94386
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001224.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001348.tsx b/.history/components/UI/ButtonImg_20220529001348.tsx
new file mode 100644
index 0000000..e745281
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001348.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529001412.tsx b/.history/components/UI/ButtonImg_20220529001412.tsx
new file mode 100644
index 0000000..e745281
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529001412.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/ButtonImg_20220529142855.tsx b/.history/components/UI/ButtonImg_20220529142855.tsx
new file mode 100644
index 0000000..e745281
--- /dev/null
+++ b/.history/components/UI/ButtonImg_20220529142855.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518152339.tsx b/.history/components/UI/Button_20220518152339.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/Button_20220518152348.tsx b/.history/components/UI/Button_20220518152348.tsx
new file mode 100644
index 0000000..e9b39d8
--- /dev/null
+++ b/.history/components/UI/Button_20220518152348.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const Button = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default Button;
diff --git a/.history/components/UI/Button_20220518152711.tsx b/.history/components/UI/Button_20220518152711.tsx
new file mode 100644
index 0000000..791d2c6
--- /dev/null
+++ b/.history/components/UI/Button_20220518152711.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC = () => (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default Button;
diff --git a/.history/components/UI/Button_20220518152806.tsx b/.history/components/UI/Button_20220518152806.tsx
new file mode 100644
index 0000000..fdd9087
--- /dev/null
+++ b/.history/components/UI/Button_20220518152806.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC = () => (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
diff --git a/.history/components/UI/Button_20220518152920.tsx b/.history/components/UI/Button_20220518152920.tsx
new file mode 100644
index 0000000..91af155
--- /dev/null
+++ b/.history/components/UI/Button_20220518152920.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC<Props> = () => (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
diff --git a/.history/components/UI/Button_20220518152939.tsx b/.history/components/UI/Button_20220518152939.tsx
new file mode 100644
index 0000000..522fd06
--- /dev/null
+++ b/.history/components/UI/Button_20220518152939.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC<Props> = (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
diff --git a/.history/components/UI/Button_20220518153013.tsx b/.history/components/UI/Button_20220518153013.tsx
new file mode 100644
index 0000000..f634dcd
--- /dev/null
+++ b/.history/components/UI/Button_20220518153013.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518153019.tsx b/.history/components/UI/Button_20220518153019.tsx
new file mode 100644
index 0000000..54d2d09
--- /dev/null
+++ b/.history/components/UI/Button_20220518153019.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518153025.tsx b/.history/components/UI/Button_20220518153025.tsx
new file mode 100644
index 0000000..54d2d09
--- /dev/null
+++ b/.history/components/UI/Button_20220518153025.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518154104.tsx b/.history/components/UI/Button_20220518154104.tsx
new file mode 100644
index 0000000..89fdf86
--- /dev/null
+++ b/.history/components/UI/Button_20220518154104.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518155731.tsx b/.history/components/UI/Button_20220518155731.tsx
new file mode 100644
index 0000000..2a290c9
--- /dev/null
+++ b/.history/components/UI/Button_20220518155731.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: any;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518155848.tsx b/.history/components/UI/Button_20220518155848.tsx
new file mode 100644
index 0000000..89fdf86
--- /dev/null
+++ b/.history/components/UI/Button_20220518155848.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518160852.tsx b/.history/components/UI/Button_20220518160852.tsx
new file mode 100644
index 0000000..f486084
--- /dev/null
+++ b/.history/components/UI/Button_20220518160852.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: (event) => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {(event) => onClick(event)}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518160937.tsx b/.history/components/UI/Button_20220518160937.tsx
new file mode 100644
index 0000000..a6a5332
--- /dev/null
+++ b/.history/components/UI/Button_20220518160937.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: {(event: KonvaMouseEvent) => {
+        makeMove(ownMark, event.target.index)};
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {(event) => onClick(event)}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518160952.tsx b/.history/components/UI/Button_20220518160952.tsx
new file mode 100644
index 0000000..50e7195
--- /dev/null
+++ b/.history/components/UI/Button_20220518160952.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface KonvaMouseEvent extends React.MouseEvent<HTMLElement> {
+    target: KonvaTextEventTarget
+  }
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: {(event: KonvaMouseEvent) => {
+        makeMove(ownMark, event.target.index)};
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {(event) => onClick(event)}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518161030.tsx b/.history/components/UI/Button_20220518161030.tsx
new file mode 100644
index 0000000..ada1f65
--- /dev/null
+++ b/.history/components/UI/Button_20220518161030.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {(e) => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518161206.tsx b/.history/components/UI/Button_20220518161206.tsx
new file mode 100644
index 0000000..0d589a1
--- /dev/null
+++ b/.history/components/UI/Button_20220518161206.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220518161209.tsx b/.history/components/UI/Button_20220518161209.tsx
new file mode 100644
index 0000000..4133ff5
--- /dev/null
+++ b/.history/components/UI/Button_20220518161209.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220520133457.tsx b/.history/components/UI/Button_20220520133457.tsx
new file mode 100644
index 0000000..7066ce8
--- /dev/null
+++ b/.history/components/UI/Button_20220520133457.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220520133516.tsx b/.history/components/UI/Button_20220520133516.tsx
new file mode 100644
index 0000000..7066ce8
--- /dev/null
+++ b/.history/components/UI/Button_20220520133516.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220602163434.tsx b/.history/components/UI/Button_20220602163434.tsx
new file mode 100644
index 0000000..80b1a59
--- /dev/null
+++ b/.history/components/UI/Button_20220602163434.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+  }
+
+export const Button: React.FC<Props> = ({align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220604083650.tsx b/.history/components/UI/Button_20220604083650.tsx
new file mode 100644
index 0000000..8e0d2d4
--- /dev/null
+++ b/.history/components/UI/Button_20220604083650.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick:() => void;
+  }
+
+export const Button: React.FC<Props> = ({align, styles, children, onClick}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick={onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220604130939.tsx b/.history/components/UI/Button_20220604130939.tsx
new file mode 100644
index 0000000..8e0d2d4
--- /dev/null
+++ b/.history/components/UI/Button_20220604130939.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick:() => void;
+  }
+
+export const Button: React.FC<Props> = ({align, styles, children, onClick}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick={onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Button_20220604131539.tsx b/.history/components/UI/Button_20220604131539.tsx
new file mode 100644
index 0000000..915f126
--- /dev/null
+++ b/.history/components/UI/Button_20220604131539.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({align, styles, children, onClick}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick={onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Icon_20220528173840.tsx b/.history/components/UI/Icon_20220528173840.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/Icon_20220528173852.tsx b/.history/components/UI/Icon_20220528173852.tsx
new file mode 100644
index 0000000..38e2ad5
--- /dev/null
+++ b/.history/components/UI/Icon_20220528173852.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Icon: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Icon_20220528173940.tsx b/.history/components/UI/Icon_20220528173940.tsx
new file mode 100644
index 0000000..c5e9682
--- /dev/null
+++ b/.history/components/UI/Icon_20220528173940.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Icon: React.FC = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}
+
+
+export const IconMoped = (props) => {
+    return(
+        <p className={'icon_moped '}></p>
+    )
+}
+
+export const IconFire = (props) => {
+    return(
+        <p className={'icon_fire'}></p>
+    )
+}
+
diff --git a/.history/components/UI/Icon_20220528174512.tsx b/.history/components/UI/Icon_20220528174512.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/InputRadio_20220531231307.tsx b/.history/components/UI/InputRadio_20220531231307.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/InputRadio_20220531231427.tsx b/.history/components/UI/InputRadio_20220531231427.tsx
new file mode 100644
index 0000000..7326f1a
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531231427.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    num: number,
+    variable: number,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={onChange}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531231621.tsx b/.history/components/UI/InputRadio_20220531231621.tsx
new file mode 100644
index 0000000..489fc5c
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531231621.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    num: number,
+    variable: number,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={onChange}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531231629.tsx b/.history/components/UI/InputRadio_20220531231629.tsx
new file mode 100644
index 0000000..7a3f285
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531231629.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface Props {
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    num: number,
+    variable: number,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={onChange}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531231657.tsx b/.history/components/UI/InputRadio_20220531231657.tsx
new file mode 100644
index 0000000..76d8e22
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531231657.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface Props {
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    num: number,
+    variable: number,
+    label: string,
+    value: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={onChange}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531232713.tsx b/.history/components/UI/InputRadio_20220531232713.tsx
new file mode 100644
index 0000000..16d080c
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531232713.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface Props {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+  }
+
+  export const InputRadio: React.FC<Props> = ({num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531233007.tsx b/.history/components/UI/InputRadio_20220531233007.tsx
new file mode 100644
index 0000000..9e513a3
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531233007.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+interface Props {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: number,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531233038.tsx b/.history/components/UI/InputRadio_20220531233038.tsx
new file mode 100644
index 0000000..f6ce7a5
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531233038.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+interface Props {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220531234646.tsx b/.history/components/UI/InputRadio_20220531234646.tsx
new file mode 100644
index 0000000..f6ce7a5
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220531234646.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+interface Props {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601000052.tsx b/.history/components/UI/InputRadio_20220601000052.tsx
new file mode 100644
index 0000000..b8c8cb7
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601000052.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+interface Props {
+    onChange: () => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange()}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601000722.tsx b/.history/components/UI/InputRadio_20220601000722.tsx
new file mode 100644
index 0000000..f6ce7a5
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601000722.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+interface Props {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601001235.tsx b/.history/components/UI/InputRadio_20220601001235.tsx
new file mode 100644
index 0000000..15ded1b
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601001235.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+interface Props {
+    onChange: (value: number, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601001655.tsx b/.history/components/UI/InputRadio_20220601001655.tsx
new file mode 100644
index 0000000..1b46828
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601001655.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type Props = {
+    onChange: (value: number, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601085439.tsx b/.history/components/UI/InputRadio_20220601085439.tsx
new file mode 100644
index 0000000..ea0e1c0
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601085439.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type Props = {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+    key: string,
+  }
+
+  export const InputRadio: React.FC<Props> = ({key, num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601090521.tsx b/.history/components/UI/InputRadio_20220601090521.tsx
new file mode 100644
index 0000000..44f93f6
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601090521.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+type Props = {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+  }
+
+  export const InputRadio: React.FC<Props> = ({num, variable, onChange }) => {
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/InputRadio_20220601090715.tsx b/.history/components/UI/InputRadio_20220601090715.tsx
new file mode 100644
index 0000000..fde5fca
--- /dev/null
+++ b/.history/components/UI/InputRadio_20220601090715.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type Props = {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+  }
+
+  export const InputRadio: React.FC<Props> = ({num, variable, onChange }) => {
+      console.log(num, variable);
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518153618.tsx b/.history/components/UI/Input_20220518153618.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/Input_20220518154055.tsx b/.history/components/UI/Input_20220518154055.tsx
new file mode 100644
index 0000000..48774c1
--- /dev/null
+++ b/.history/components/UI/Input_20220518154055.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+ const Input = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
+Input.propTypes = {
+  onChange: PropTypes.func,
+  type: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default Input;
diff --git a/.history/components/UI/Input_20220518154112.tsx b/.history/components/UI/Input_20220518154112.tsx
new file mode 100644
index 0000000..fc1d182
--- /dev/null
+++ b/.history/components/UI/Input_20220518154112.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+ const Input = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
+Input.propTypes = {
+  onChange: PropTypes.func,
+  type: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default Input;
diff --git a/.history/components/UI/Input_20220518154156.tsx b/.history/components/UI/Input_20220518154156.tsx
new file mode 100644
index 0000000..7f0f986
--- /dev/null
+++ b/.history/components/UI/Input_20220518154156.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: PropTypes.func,
+    type: PropTypes.string,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518154211.tsx b/.history/components/UI/Input_20220518154211.tsx
new file mode 100644
index 0000000..50977ff
--- /dev/null
+++ b/.history/components/UI/Input_20220518154211.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: () => void,
+    type: PropTypes.string,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518154240.tsx b/.history/components/UI/Input_20220518154240.tsx
new file mode 100644
index 0000000..b632510
--- /dev/null
+++ b/.history/components/UI/Input_20220518154240.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: () => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518160030.tsx b/.history/components/UI/Input_20220518160030.tsx
new file mode 100644
index 0000000..b632510
--- /dev/null
+++ b/.history/components/UI/Input_20220518160030.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: () => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518160405.tsx b/.history/components/UI/Input_20220518160405.tsx
new file mode 100644
index 0000000..634aad0
--- /dev/null
+++ b/.history/components/UI/Input_20220518160405.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (event) => onChangePage(e ),
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518160427.tsx b/.history/components/UI/Input_20220518160427.tsx
new file mode 100644
index 0000000..255c1ff
--- /dev/null
+++ b/.history/components/UI/Input_20220518160427.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (e) => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518160441.tsx b/.history/components/UI/Input_20220518160441.tsx
new file mode 100644
index 0000000..6d8f943
--- /dev/null
+++ b/.history/components/UI/Input_20220518160441.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (e) => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={(e) => onChange} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518160541.tsx b/.history/components/UI/Input_20220518160541.tsx
new file mode 100644
index 0000000..456b701
--- /dev/null
+++ b/.history/components/UI/Input_20220518160541.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (e) => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={(e) => onChange(e)} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518160658.tsx b/.history/components/UI/Input_20220518160658.tsx
new file mode 100644
index 0000000..72109c6
--- /dev/null
+++ b/.history/components/UI/Input_20220518160658.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: () => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={(e) => onChange(e)} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518161150.tsx b/.history/components/UI/Input_20220518161150.tsx
new file mode 100644
index 0000000..7c9afb2
--- /dev/null
+++ b/.history/components/UI/Input_20220518161150.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: () => void,
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={(e) => onChange()} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162057.tsx b/.history/components/UI/Input_20220518162057.tsx
new file mode 100644
index 0000000..e4ccdc2
--- /dev/null
+++ b/.history/components/UI/Input_20220518162057.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (str: string) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'} type={type} name={name} onChange={(e) => onChange()} value={value}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162231.tsx b/.history/components/UI/Input_20220518162231.tsx
new file mode 100644
index 0000000..1823255
--- /dev/null
+++ b/.history/components/UI/Input_20220518162231.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (str: string) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'}
+                        type={type}
+                        name={name}
+                        value={value}
+                        onChange={(event => onChange({value:event.target.value, }   }/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162331.tsx b/.history/components/UI/Input_20220518162331.tsx
new file mode 100644
index 0000000..cea5a44
--- /dev/null
+++ b/.history/components/UI/Input_20220518162331.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (str: string) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'}
+                        type={type}
+                        name={name}
+                        value={value}
+                        onChange={onChange}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162409.tsx b/.history/components/UI/Input_20220518162409.tsx
new file mode 100644
index 0000000..58b4a14
--- /dev/null
+++ b/.history/components/UI/Input_20220518162409.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: onChange;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'}
+                        type={type}
+                        name={name}
+                        value={value}
+                        onChange={onChange}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162416.tsx b/.history/components/UI/Input_20220518162416.tsx
new file mode 100644
index 0000000..cea5a44
--- /dev/null
+++ b/.history/components/UI/Input_20220518162416.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (str: string) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={'input input_filled'}>
+                <input className={'input_field input_field_mui'}
+                        type={type}
+                        name={name}
+                        value={value}
+                        onChange={onChange}/>
+                <label className={'input_label input_label_mui'} htmlFor={label}>
+                    <span className={classNames('input_label_content', 'input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162550.tsx b/.history/components/UI/Input_20220518162550.tsx
new file mode 100644
index 0000000..6ddcc33
--- /dev/null
+++ b/.history/components/UI/Input_20220518162550.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (str: string) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={classNames('input input_filled')}>
+                <input className={classNames('input_field input_field_mui')}
+                        onChange={event => onChange(event.target.value)}
+                        type={type}
+                        name={name}
+                        value={value}/>
+                <label className={classNames('input_label input_label_mui')} htmlFor={label}>
+                    <span className={classNames('input_label_content input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162705.tsx b/.history/components/UI/Input_20220518162705.tsx
new file mode 100644
index 0000000..b121b03
--- /dev/null
+++ b/.history/components/UI/Input_20220518162705.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (value: string, name: string) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={classNames('input input_filled')}>
+                <input className={classNames('input_field input_field_mui')}
+                        onChange={event => onChange(event.target.value, event.target.name)}
+                        type={type}
+                        name={name}
+                        value={value}/>
+                <label className={classNames('input_label input_label_mui')} htmlFor={label}>
+                    <span className={classNames('input_label_content input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162855.tsx b/.history/components/UI/Input_20220518162855.tsx
new file mode 100644
index 0000000..abaf6e0
--- /dev/null
+++ b/.history/components/UI/Input_20220518162855.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={classNames('input input_filled')}>
+                <input className={classNames('input_field input_field_mui')}
+                        onChange={event => onChange(event.target.name, event.target.value)}
+                        type={type}
+                        name={name}
+                        value={value}/>
+                <label className={classNames('input_label input_label_mui')} htmlFor={label}>
+                    <span className={classNames('input_label_content input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220518162935.tsx b/.history/components/UI/Input_20220518162935.tsx
new file mode 100644
index 0000000..abaf6e0
--- /dev/null
+++ b/.history/components/UI/Input_20220518162935.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={classNames('input input_filled')}>
+                <input className={classNames('input_field input_field_mui')}
+                        onChange={event => onChange(event.target.name, event.target.value)}
+                        type={type}
+                        name={name}
+                        value={value}/>
+                <label className={classNames('input_label input_label_mui')} htmlFor={label}>
+                    <span className={classNames('input_label_content input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Input_20220531163847.tsx b/.history/components/UI/Input_20220531163847.tsx
new file mode 100644
index 0000000..abaf6e0
--- /dev/null
+++ b/.history/components/UI/Input_20220531163847.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={classNames('input input_filled')}>
+                <input className={classNames('input_field input_field_mui')}
+                        onChange={event => onChange(event.target.name, event.target.value)}
+                        type={type}
+                        name={name}
+                        value={value}/>
+                <label className={classNames('input_label input_label_mui')} htmlFor={label}>
+                    <span className={classNames('input_label_content input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/.history/components/UI/Label_20220518154328.tsx b/.history/components/UI/Label_20220518154328.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/Label_20220518154341.tsx b/.history/components/UI/Label_20220518154341.tsx
new file mode 100644
index 0000000..ded488e
--- /dev/null
+++ b/.history/components/UI/Label_20220518154341.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+ const Label = ({...props}) => {
+    return(
+        <div className='label_main'>
+            <label>{props.children}</label>
+        </div>
+    )
+}
+
+export default Label;
\ No newline at end of file
diff --git a/.history/components/UI/Label_20220518154410.tsx b/.history/components/UI/Label_20220518154410.tsx
new file mode 100644
index 0000000..da4b0f9
--- /dev/null
+++ b/.history/components/UI/Label_20220518154410.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const Label: React.FC<Props> = ({type, name, label, onChange, value }) => {
+ const Label = ({...props}) => {
+    return(
+        <div className='label_main'>
+            <label>{props.children}</label>
+        </div>
+    )
+}
+
+export default Label;
\ No newline at end of file
diff --git a/.history/components/UI/Label_20220518154429.tsx b/.history/components/UI/Label_20220518154429.tsx
new file mode 100644
index 0000000..78c2137
--- /dev/null
+++ b/.history/components/UI/Label_20220518154429.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const Label: React.FC<Props> = ({children }) => {
+    return(
+        <div className='label_main'>
+            <label>{children}</label>
+        </div>
+    )
+}
+
+export default Label;
\ No newline at end of file
diff --git a/.history/components/UI/Label_20220518154510.tsx b/.history/components/UI/Label_20220518154510.tsx
new file mode 100644
index 0000000..b1d3da1
--- /dev/null
+++ b/.history/components/UI/Label_20220518154510.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const Label: React.FC<Props> = ({children }) => {
+    return(
+        <div className='label_main'>
+            <label>{children}</label>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518154850.tsx b/.history/components/UI/LinkButton_20220518154850.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/LinkButton_20220518154900.tsx b/.history/components/UI/LinkButton_20220518154900.tsx
new file mode 100644
index 0000000..a905326
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518154900.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+ const LinkButton = ({...props}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className={'link_button ' + ' ' + props.color} {...props}>{props.children}</button>
+        </div>
+    )
+}
+
+export default LinkButton;
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518154942.tsx b/.history/components/UI/LinkButton_20220518154942.tsx
new file mode 100644
index 0000000..1cd561c
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518154942.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, color, styles, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className={'link_button ' + ' ' + color} >{props.children}</button>
+        </div>
+    )
+}
+
+export default LinkButton;
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518154957.tsx b/.history/components/UI/LinkButton_20220518154957.tsx
new file mode 100644
index 0000000..472e25b
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518154957.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, color, styles, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className={'link_button ' + ' ' + color} onClick = {onClick}>{children}</button>
+        </div>
+    )
+}
+
+export default LinkButton;
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518155013.tsx b/.history/components/UI/LinkButton_20220518155013.tsx
new file mode 100644
index 0000000..e5f0d7b
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518155013.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, color, styles, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className={'link_button ' + ' ' + color} onClick = {onClick}>{children}</button>
+        </div>
+    )
+}
+
+export default LinkButton;
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518155030.tsx b/.history/components/UI/LinkButton_20220518155030.tsx
new file mode 100644
index 0000000..f7bd461
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518155030.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, styles, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className={'link_button ' + ' ' + styles} onClick = {onClick}>{children}</button>
+        </div>
+    )
+}
+
+export default LinkButton;
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518155108.tsx b/.history/components/UI/LinkButton_20220518155108.tsx
new file mode 100644
index 0000000..b54f1bb
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518155108.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, styles, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className= {classNames('link_button', styles )} onClick = {onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518155950.tsx b/.history/components/UI/LinkButton_20220518155950.tsx
new file mode 100644
index 0000000..52eccf9
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518155950.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className= {classNames('link_button')} onClick = {onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/LinkButton_20220518163041.tsx b/.history/components/UI/LinkButton_20220518163041.tsx
new file mode 100644
index 0000000..6dc8dbd
--- /dev/null
+++ b/.history/components/UI/LinkButton_20220518163041.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className= {classNames('link_button')} onClick = {() => onClick()}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163311.tsx b/.history/components/UI/Modal_20220531163311.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/Modal_20220531163315.tsx b/.history/components/UI/Modal_20220531163315.tsx
new file mode 100644
index 0000000..6148637
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163315.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={"modal_dialog "+ " " + props.position}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163323.tsx b/.history/components/UI/Modal_20220531163323.tsx
new file mode 100644
index 0000000..c441ed9
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163323.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={"modal_dialog "+ " " + props.position}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163408.tsx b/.history/components/UI/Modal_20220531163408.tsx
new file mode 100644
index 0000000..fade33a
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163408.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={"modal_dialog "+ " " + props.position}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163415.tsx b/.history/components/UI/Modal_20220531163415.tsx
new file mode 100644
index 0000000..054a006
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163415.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog "+ " " + props.position}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163419.tsx b/.history/components/UI/Modal_20220531163419.tsx
new file mode 100644
index 0000000..bd269a9
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163419.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog "props.position}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163421.tsx b/.history/components/UI/Modal_20220531163421.tsx
new file mode 100644
index 0000000..df65799
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163421.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", props.position}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163423.tsx b/.history/components/UI/Modal_20220531163423.tsx
new file mode 100644
index 0000000..b391c4b
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163423.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", props.position)}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163425.tsx b/.history/components/UI/Modal_20220531163425.tsx
new file mode 100644
index 0000000..d290907
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163425.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={"modal_content " + " " + props.styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163429.tsx b/.history/components/UI/Modal_20220531163429.tsx
new file mode 100644
index 0000000..5ee2d88
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163429.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={"modal_content " + " " +styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163432.tsx b/.history/components/UI/Modal_20220531163432.tsx
new file mode 100644
index 0000000..42ced7f
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163432.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={"modal_content "styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163434.tsx b/.history/components/UI/Modal_20220531163434.tsx
new file mode 100644
index 0000000..49594cd
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163434.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={"modal_content ", styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163437.tsx b/.history/components/UI/Modal_20220531163437.tsx
new file mode 100644
index 0000000..d1391b1
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163437.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={classNames"modal_content ", styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163439.tsx b/.history/components/UI/Modal_20220531163439.tsx
new file mode 100644
index 0000000..81bf62d
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163439.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={classNames('modal_content ", styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163441.tsx b/.history/components/UI/Modal_20220531163441.tsx
new file mode 100644
index 0000000..c34232c
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163441.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={classNames('modal_content ', styles}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163443.tsx b/.history/components/UI/Modal_20220531163443.tsx
new file mode 100644
index 0000000..0bb12d0
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163443.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ", position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163446.tsx b/.history/components/UI/Modal_20220531163446.tsx
new file mode 100644
index 0000000..7c8864d
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163446.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames("modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163448.tsx b/.history/components/UI/Modal_20220531163448.tsx
new file mode 100644
index 0000000..cd24f7b
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163448.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={"modal"}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163450.tsx b/.history/components/UI/Modal_20220531163450.tsx
new file mode 100644
index 0000000..51c8eba
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163450.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={'modal"}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163452.tsx b/.history/components/UI/Modal_20220531163452.tsx
new file mode 100644
index 0000000..2442bc4
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163452.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className="modal_body">
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163454.tsx b/.history/components/UI/Modal_20220531163454.tsx
new file mode 100644
index 0000000..73c258d
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163454.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className="modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163456.tsx b/.history/components/UI/Modal_20220531163456.tsx
new file mode 100644
index 0000000..965d496
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163456.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Modal = ({...props}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163511.tsx b/.history/components/UI/Modal_20220531163511.tsx
new file mode 100644
index 0000000..904cc15
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163511.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163514.tsx b/.history/components/UI/Modal_20220531163514.tsx
new file mode 100644
index 0000000..50a293f
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163514.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163523.tsx b/.history/components/UI/Modal_20220531163523.tsx
new file mode 100644
index 0000000..ce11d60
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163523.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { position: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163527.tsx b/.history/components/UI/Modal_20220531163527.tsx
new file mode 100644
index 0000000..65d3889
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163527.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { position: st };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163528.tsx b/.history/components/UI/Modal_20220531163528.tsx
new file mode 100644
index 0000000..b6cfb68
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163528.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { position: string };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163530.tsx b/.history/components/UI/Modal_20220531163530.tsx
new file mode 100644
index 0000000..7e0c517
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163530.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { position: string;
+                 };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163537.tsx b/.history/components/UI/Modal_20220531163537.tsx
new file mode 100644
index 0000000..8590154
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163537.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { position: string;
+    styles: };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163540.tsx b/.history/components/UI/Modal_20220531163540.tsx
new file mode 100644
index 0000000..763b134
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163540.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = { position: string;
+                styles: };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163541.tsx b/.history/components/UI/Modal_20220531163541.tsx
new file mode 100644
index 0000000..729d246
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163541.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163544.tsx b/.history/components/UI/Modal_20220531163544.tsx
new file mode 100644
index 0000000..9110c7e
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163544.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: string };
+
+export const Modals: React.FC<Props> = ({children}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163550.tsx b/.history/components/UI/Modal_20220531163550.tsx
new file mode 100644
index 0000000..098d2f6
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163550.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: string };
+
+export const Modals: React.FC<Props> = ({position, }) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163554.tsx b/.history/components/UI/Modal_20220531163554.tsx
new file mode 100644
index 0000000..a70a0db
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163554.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: string };
+
+export const Modals: React.FC<Props> = ({position, styles }) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163556.tsx b/.history/components/UI/Modal_20220531163556.tsx
new file mode 100644
index 0000000..ca0125e
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163556.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: string };
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163600.tsx b/.history/components/UI/Modal_20220531163600.tsx
new file mode 100644
index 0000000..38bc808
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163600.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: string }
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163601.tsx b/.history/components/UI/Modal_20220531163601.tsx
new file mode 100644
index 0000000..cb176b8
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163601.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string;
+                styles: string; }
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163622.tsx b/.history/components/UI/Modal_20220531163622.tsx
new file mode 100644
index 0000000..c22c45d
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163622.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string
+                styles: string; }
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163624.tsx b/.history/components/UI/Modal_20220531163624.tsx
new file mode 100644
index 0000000..2476f3b
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163624.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string,
+                styles: string; }
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163626.tsx b/.history/components/UI/Modal_20220531163626.tsx
new file mode 100644
index 0000000..34a07a2
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163626.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {  position: string,
+                styles: string, }
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163636.tsx b/.history/components/UI/Modal_20220531163636.tsx
new file mode 100644
index 0000000..482afbb
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163636.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+export const Modals: React.FC<Props> = ({position, styles}) 
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163651.tsx b/.history/components/UI/Modal_20220531163651.tsx
new file mode 100644
index 0000000..94342d2
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163651.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+export const Modals: React.FC<Props> = ({position, styles}) =>
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163700.tsx b/.history/components/UI/Modal_20220531163700.tsx
new file mode 100644
index 0000000..5a13408
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163700.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+                
+export const Modals: React.FC<Props> = ({position, styles}) =>
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163702.tsx b/.history/components/UI/Modal_20220531163702.tsx
new file mode 100644
index 0000000..2edaa9f
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163702.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+                export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+                    return(
+export const Modals: React.FC<Props> = ({position, styles}) =>
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163714.tsx b/.history/components/UI/Modal_20220531163714.tsx
new file mode 100644
index 0000000..5fef8d4
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163714.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+                export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+                    return(
+export const Modals: React.FC<Props> = ({position, styles}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163723.tsx b/.history/components/UI/Modal_20220531163723.tsx
new file mode 100644
index 0000000..2d0c725
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163723.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+
+export const Modals: React.FC<Props> = ({position, styles}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163725.tsx b/.history/components/UI/Modal_20220531163725.tsx
new file mode 100644
index 0000000..b58e156
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163725.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+export const Modals: React.FC<Props> = ({position, styles}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {props.children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163727.tsx b/.history/components/UI/Modal_20220531163727.tsx
new file mode 100644
index 0000000..b2c4f62
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163727.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+export const Modals: React.FC<Props> = ({position, styles}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163732.tsx b/.history/components/UI/Modal_20220531163732.tsx
new file mode 100644
index 0000000..68908b9
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163732.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163748.tsx b/.history/components/UI/Modal_20220531163748.tsx
new file mode 100644
index 0000000..00807e5
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163748.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531163834.tsx b/.history/components/UI/Modal_20220531163834.tsx
new file mode 100644
index 0000000..8947abe
--- /dev/null
+++ b/.history/components/UI/Modal_20220531163834.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  position: string,
+                styles: string, children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531164804.tsx b/.history/components/UI/Modal_20220531164804.tsx
new file mode 100644
index 0000000..18feebd
--- /dev/null
+++ b/.history/components/UI/Modal_20220531164804.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  
+                    position: string,
+                styles: string, children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531164806.tsx b/.history/components/UI/Modal_20220531164806.tsx
new file mode 100644
index 0000000..26a912a
--- /dev/null
+++ b/.history/components/UI/Modal_20220531164806.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  
+                    position: string,
+                    styles: string, children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531164808.tsx b/.history/components/UI/Modal_20220531164808.tsx
new file mode 100644
index 0000000..17a6034
--- /dev/null
+++ b/.history/components/UI/Modal_20220531164808.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  
+                    position: string,
+                    styles: string, 
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531164810.tsx b/.history/components/UI/Modal_20220531164810.tsx
new file mode 100644
index 0000000..8d912a0
--- /dev/null
+++ b/.history/components/UI/Modal_20220531164810.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531164811.tsx b/.history/components/UI/Modal_20220531164811.tsx
new file mode 100644
index 0000000..8d912a0
--- /dev/null
+++ b/.history/components/UI/Modal_20220531164811.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {  
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531164821.tsx b/.history/components/UI/Modal_20220531164821.tsx
new file mode 100644
index 0000000..138f295
--- /dev/null
+++ b/.history/components/UI/Modal_20220531164821.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531165029.tsx b/.history/components/UI/Modal_20220531165029.tsx
new file mode 100644
index 0000000..c68218d
--- /dev/null
+++ b/.history/components/UI/Modal_20220531165029.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}э
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214657.tsx b/.history/components/UI/Modal_20220531214657.tsx
new file mode 100644
index 0000000..138f295
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214657.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214747.tsx b/.history/components/UI/Modal_20220531214747.tsx
new file mode 100644
index 0000000..679dfd7
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214747.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode }
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214755.tsx b/.history/components/UI/Modal_20220531214755.tsx
new file mode 100644
index 0000000..9acd35d
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214755.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props = {
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214802.tsx b/.history/components/UI/Modal_20220531214802.tsx
new file mode 100644
index 0000000..97fdd7e
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214802.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                    position: string,
+                    styles: string,
+                    children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214807.tsx b/.history/components/UI/Modal_20220531214807.tsx
new file mode 100644
index 0000000..df75f2f
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214807.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                position: string,
+                    styles: string,
+                    children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214808.tsx b/.history/components/UI/Modal_20220531214808.tsx
new file mode 100644
index 0000000..bfbb3d8
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214808.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                position: string,
+                styles: string,
+                    children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214810.tsx b/.history/components/UI/Modal_20220531214810.tsx
new file mode 100644
index 0000000..ca54919
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214810.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                position: string,
+                styles: string,
+                children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531214815.tsx b/.history/components/UI/Modal_20220531214815.tsx
new file mode 100644
index 0000000..ca54919
--- /dev/null
+++ b/.history/components/UI/Modal_20220531214815.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                position: string,
+                styles: string,
+                children: React.ReactNode };
+
+export const Modals: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/Modal_20220531215624.tsx b/.history/components/UI/Modal_20220531215624.tsx
new file mode 100644
index 0000000..c0f2932
--- /dev/null
+++ b/.history/components/UI/Modal_20220531215624.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                position: string,
+                styles: string,
+                children: React.ReactNode };
+
+export const Modal: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185557.tsx b/.history/components/UI/PictureText_20220530185557.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/PictureText_20220530185603.tsx b/.history/components/UI/PictureText_20220530185603.tsx
new file mode 100644
index 0000000..6dc8dbd
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185603.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className= {classNames('link_button')} onClick = {() => onClick()}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185607.tsx b/.history/components/UI/PictureText_20220530185607.tsx
new file mode 100644
index 0000000..ba39daa
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185607.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className= {classNames('link_button')} onClick = {() => onClick()}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185618.tsx b/.history/components/UI/PictureText_20220530185618.tsx
new file mode 100644
index 0000000..7a84956
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185618.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185630.tsx b/.history/components/UI/PictureText_20220530185630.tsx
new file mode 100644
index 0000000..85f33bb
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185630.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185642.tsx b/.history/components/UI/PictureText_20220530185642.tsx
new file mode 100644
index 0000000..2375b73
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185642.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({src, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185646.tsx b/.history/components/UI/PictureText_20220530185646.tsx
new file mode 100644
index 0000000..18489fc
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185646.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({src,alt, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185647.tsx b/.history/components/UI/PictureText_20220530185647.tsx
new file mode 100644
index 0000000..1c80325
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185647.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185651.tsx b/.history/components/UI/PictureText_20220530185651.tsx
new file mode 100644
index 0000000..9caf876
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185651.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185655.tsx b/.history/components/UI/PictureText_20220530185655.tsx
new file mode 100644
index 0000000..28e2b37
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185655.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={props.src}
+                alt={props.alt}
+                width={props.width}
+                height={props.height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185701.tsx b/.history/components/UI/PictureText_20220530185701.tsx
new file mode 100644
index 0000000..9f223b0
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185701.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185708.tsx b/.history/components/UI/PictureText_20220530185708.tsx
new file mode 100644
index 0000000..f9ab205
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185708.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185719.tsx b/.history/components/UI/PictureText_20220530185719.tsx
new file mode 100644
index 0000000..5385608
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185719.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185723.tsx b/.history/components/UI/PictureText_20220530185723.tsx
new file mode 100644
index 0000000..b8c185e
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185723.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src:
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185728.tsx b/.history/components/UI/PictureText_20220530185728.tsx
new file mode 100644
index 0000000..f9fa622
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185728.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185735.tsx b/.history/components/UI/PictureText_20220530185735.tsx
new file mode 100644
index 0000000..a47df6d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185735.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185740.tsx b/.history/components/UI/PictureText_20220530185740.tsx
new file mode 100644
index 0000000..b475fec
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185740.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: 
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185742.tsx b/.history/components/UI/PictureText_20220530185742.tsx
new file mode 100644
index 0000000..f590e3d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185742.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: in
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185750.tsx b/.history/components/UI/PictureText_20220530185750.tsx
new file mode 100644
index 0000000..dc04ee7
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185750.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185754.tsx b/.history/components/UI/PictureText_20220530185754.tsx
new file mode 100644
index 0000000..d8bf577
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185754.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: number;
+    width: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185756.tsx b/.history/components/UI/PictureText_20220530185756.tsx
new file mode 100644
index 0000000..8d01871
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185756.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{props.children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185759.tsx b/.history/components/UI/PictureText_20220530185759.tsx
new file mode 100644
index 0000000..c1cf7dd
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185759.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185800.tsx b/.history/components/UI/PictureText_20220530185800.tsx
new file mode 100644
index 0000000..c1cf7dd
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185800.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185931.tsx b/.history/components/UI/PictureText_20220530185931.tsx
new file mode 100644
index 0000000..84d5a4d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185931.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185935.tsx b/.history/components/UI/PictureText_20220530185935.tsx
new file mode 100644
index 0000000..27fcd32
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185935.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={children}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185936.tsx b/.history/components/UI/PictureText_20220530185936.tsx
new file mode 100644
index 0000000..84d5a4d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185936.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185938.tsx b/.history/components/UI/PictureText_20220530185938.tsx
new file mode 100644
index 0000000..e0ded32
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185938.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={''}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185940.tsx b/.history/components/UI/PictureText_20220530185940.tsx
new file mode 100644
index 0000000..e40222d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185940.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, alt, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185944.tsx b/.history/components/UI/PictureText_20220530185944.tsx
new file mode 100644
index 0000000..9b1c3f7
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185944.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530185945.tsx b/.history/components/UI/PictureText_20220530185945.tsx
new file mode 100644
index 0000000..9b1c3f7
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530185945.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+            <div className={'pictureText_box'} >
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530191651.tsx b/.history/components/UI/PictureText_20220530191651.tsx
new file mode 100644
index 0000000..d8688b1
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530191651.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+           
+                <p className={'pictureText_text'}>{children}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530191652.tsx b/.history/components/UI/PictureText_20220530191652.tsx
new file mode 100644
index 0000000..945718d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530191652.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+           
+                <p className={'pictureText_text'}>{children}</p>
+           
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530191653.tsx b/.history/components/UI/PictureText_20220530191653.tsx
new file mode 100644
index 0000000..945718d
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530191653.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+           
+                <p className={'pictureText_text'}>{children}</p>
+           
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530192338.tsx b/.history/components/UI/PictureText_20220530192338.tsx
new file mode 100644
index 0000000..574facc
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530192338.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+           
+                <p className={'text'}>{children}</p>
+           
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530192339.tsx b/.history/components/UI/PictureText_20220530192339.tsx
new file mode 100644
index 0000000..163886f
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530192339.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+                <p className={'text'}>{children}</p>
+           
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/PictureText_20220530192342.tsx b/.history/components/UI/PictureText_20220530192342.tsx
new file mode 100644
index 0000000..18982b5
--- /dev/null
+++ b/.history/components/UI/PictureText_20220530192342.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+                <p className={'text'}>{children}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531215938.tsx b/.history/components/UI/RadioButton_20220531215938.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/RadioButton_20220531215944.tsx b/.history/components/UI/RadioButton_20220531215944.tsx
new file mode 100644
index 0000000..fc00e30
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531215944.tsx
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+
+const RadioButton = ({...props}) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {props.masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220104.tsx b/.history/components/UI/RadioButton_20220531220104.tsx
new file mode 100644
index 0000000..0e332a7
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220104.tsx
@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+
+export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+
+const RadioButton = ({...props}) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {props.masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220108.tsx b/.history/components/UI/RadioButton_20220531220108.tsx
new file mode 100644
index 0000000..ef1a886
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220108.tsx
@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+
+export const RadioButton: React.FC<Props> = ({type, name, label, onChange, value }) => {
+
+const RadioButton = ({...props}) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {props.masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220112.tsx b/.history/components/UI/RadioButton_20220531220112.tsx
new file mode 100644
index 0000000..acdc85d
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220112.tsx
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+
+export const RadioButton: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {props.masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220124.tsx b/.history/components/UI/RadioButton_20220531220124.tsx
new file mode 100644
index 0000000..a8bdf8a
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220124.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {props.masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220241.tsx b/.history/components/UI/RadioButton_20220531220241.tsx
new file mode 100644
index 0000000..74ef7ac
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220241.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220245.tsx b/.history/components/UI/RadioButton_20220531220245.tsx
new file mode 100644
index 0000000..2bfa7ec
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220245.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    masImg: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220247.tsx b/.history/components/UI/RadioButton_20220531220247.tsx
new file mode 100644
index 0000000..2cfc4bb
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220247.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    masImg: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220311.tsx b/.history/components/UI/RadioButton_20220531220311.tsx
new file mode 100644
index 0000000..83b1ec1
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220311.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    masImg: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220552.tsx b/.history/components/UI/RadioButton_20220531220552.tsx
new file mode 100644
index 0000000..f68280b
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220552.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        props.updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220635.tsx b/.history/components/UI/RadioButton_20220531220635.tsx
new file mode 100644
index 0000000..251f5fa
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220635.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220640.tsx b/.history/components/UI/RadioButton_20220531220640.tsx
new file mode 100644
index 0000000..5b1f7d3
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220640.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: (name: string, value: string,) => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, onChange, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220644.tsx b/.history/components/UI/RadioButton_20220531220644.tsx
new file mode 100644
index 0000000..5dd9177
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220644.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: (name: string, value: string,) => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, updateData, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220650.tsx b/.history/components/UI/RadioButton_20220531220650.tsx
new file mode 100644
index 0000000..27220d8
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220650.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, name, label, updateData, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220705.tsx b/.history/components/UI/RadioButton_20220531220705.tsx
new file mode 100644
index 0000000..d90da8d
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220705.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData, value }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220707.tsx b/.history/components/UI/RadioButton_20220531220707.tsx
new file mode 100644
index 0000000..7c4e601
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220707.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220729.tsx b/.history/components/UI/RadioButton_20220531220729.tsx
new file mode 100644
index 0000000..c9e3d4f
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220729.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220733.tsx b/.history/components/UI/RadioButton_20220531220733.tsx
new file mode 100644
index 0000000..6409153
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220733.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type 
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220738.tsx b/.history/components/UI/RadioButton_20220531220738.tsx
new file mode 100644
index 0000000..6409153
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220738.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type 
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220739.tsx b/.history/components/UI/RadioButton_20220531220739.tsx
new file mode 100644
index 0000000..8bcb55e
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220739.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type Ch
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220741.tsx b/.history/components/UI/RadioButton_20220531220741.tsx
new file mode 100644
index 0000000..48d8522
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220741.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type Cha
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220747.tsx b/.history/components/UI/RadioButton_20220531220747.tsx
new file mode 100644
index 0000000..aeaef74
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220747.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type ChangeProps
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220753.tsx b/.history/components/UI/RadioButton_20220531220753.tsx
new file mode 100644
index 0000000..2cfe585
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220753.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type ChangeProps {
+        
+    }
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220758.tsx b/.history/components/UI/RadioButton_20220531220758.tsx
new file mode 100644
index 0000000..08fe8bb
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220758.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type ChangeProps {
+        e: st
+    }
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220801.tsx b/.history/components/UI/RadioButton_20220531220801.tsx
new file mode 100644
index 0000000..68fbeb6
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220801.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type ChangeProps {
+        e: string
+    }
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220802.tsx b/.history/components/UI/RadioButton_20220531220802.tsx
new file mode 100644
index 0000000..17b9613
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220802.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    type ChangeProps {
+        e: string;
+    }
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220808.tsx b/.history/components/UI/RadioButton_20220531220808.tsx
new file mode 100644
index 0000000..c636a81
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220808.tsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220809.tsx b/.history/components/UI/RadioButton_20220531220809.tsx
new file mode 100644
index 0000000..a6db9f0
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220809.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+    
+    const change = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220828.tsx b/.history/components/UI/RadioButton_20220531220828.tsx
new file mode 100644
index 0000000..1a9978d
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220828.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+
+    const change: React.FC = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220832.tsx b/.history/components/UI/RadioButton_20220531220832.tsx
new file mode 100644
index 0000000..b77bae8
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220832.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+
+    const change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220838.tsx b/.history/components/UI/RadioButton_20220531220838.tsx
new file mode 100644
index 0000000..caa84a8
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220838.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220842.tsx b/.history/components/UI/RadioButton_20220531220842.tsx
new file mode 100644
index 0000000..ee47e06
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220842.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220856.tsx b/.history/components/UI/RadioButton_20220531220856.tsx
new file mode 100644
index 0000000..ee47e06
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220856.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: string;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220903.tsx b/.history/components/UI/RadioButton_20220531220903.tsx
new file mode 100644
index 0000000..c6bbb8d
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220903.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: : () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531220905.tsx b/.history/components/UI/RadioButton_20220531220905.tsx
new file mode 100644
index 0000000..0413560
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531220905.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    onChange={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531221105.tsx b/.history/components/UI/RadioButton_20220531221105.tsx
new file mode 100644
index 0000000..3234051
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531221105.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    wwwwwwwww={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531221121.tsx b/.history/components/UI/RadioButton_20220531221121.tsx
new file mode 100644
index 0000000..15a5bfb
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531221121.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    wwwwwwwwwdr332wewaasc={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}vvvccccccxc    
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531221123.tsx b/.history/components/UI/RadioButton_20220531221123.tsx
new file mode 100644
index 0000000..a35451e
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531221123.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    wwwwwwwwwdr332wewaasc={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}vvvccccccxc      
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531221131.tsx b/.history/components/UI/RadioButton_20220531221131.tsx
new file mode 100644
index 0000000..e8014a3
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531221131.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    wwwwwwwwwdr332wewaasc={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}vvvccccccxc           
\ No newline at end of file
diff --git a/.history/components/UI/RadioButton_20220531221133.tsx b/.history/components/UI/RadioButton_20220531221133.tsx
new file mode 100644
index 0000000..5919684
--- /dev/null
+++ b/.history/components/UI/RadioButton_20220531221133.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    wwwwwwwwwdr332wewaasc={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}vvvccccccxc            
\ No newline at end of file
diff --git a/.history/components/UI/SmallText_20220518155150.tsx b/.history/components/UI/SmallText_20220518155150.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/SmallText_20220518155208.tsx b/.history/components/UI/SmallText_20220518155208.tsx
new file mode 100644
index 0000000..f81765a
--- /dev/null
+++ b/.history/components/UI/SmallText_20220518155208.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+ const SmallText = ({...props}) => {
+    return(
+        <div>
+            <p>{props.children}</p>
+        </div>
+    )
+}
+
+export default SmallText;
\ No newline at end of file
diff --git a/.history/components/UI/SmallText_20220518155233.tsx b/.history/components/UI/SmallText_20220518155233.tsx
new file mode 100644
index 0000000..f4b00e9
--- /dev/null
+++ b/.history/components/UI/SmallText_20220518155233.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const SmallText: React.FC<Props> = ({children }) => {
+    return(
+        <div>
+            <p>{children}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Title_20220518154600.tsx b/.history/components/UI/Title_20220518154600.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/UI/Title_20220518154607.tsx b/.history/components/UI/Title_20220518154607.tsx
new file mode 100644
index 0000000..a01d483
--- /dev/null
+++ b/.history/components/UI/Title_20220518154607.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+ const Title = (props) => {
+    return(
+        <div className="Title">
+            <h2>{props.children}</h2>
+        </div>
+    )
+}
+
+export default Title;
\ No newline at end of file
diff --git a/.history/components/UI/Title_20220518154615.tsx b/.history/components/UI/Title_20220518154615.tsx
new file mode 100644
index 0000000..dbe97f3
--- /dev/null
+++ b/.history/components/UI/Title_20220518154615.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+ const Title = (props) => {
+    return(
+        <div className="Title">
+            <h2>{props.children}</h2>
+        </div>
+    )
+}
+
+export default Title;
\ No newline at end of file
diff --git a/.history/components/UI/Title_20220518154658.tsx b/.history/components/UI/Title_20220518154658.tsx
new file mode 100644
index 0000000..f24cff5
--- /dev/null
+++ b/.history/components/UI/Title_20220518154658.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+}
+
+export const Title: React.FC<Props> = ({children }) => {
+    return(
+        <div className="Title">
+            <h2>{children}</h2>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Title_20220518154704.tsx b/.history/components/UI/Title_20220518154704.tsx
new file mode 100644
index 0000000..5b6c871
--- /dev/null
+++ b/.history/components/UI/Title_20220518154704.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+}
+
+export const Title: React.FC<Props> = ({ children }) => {
+    return(
+        <div className="Title">
+            <h2>{children}</h2>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/Title_20220520143753.tsx b/.history/components/UI/Title_20220520143753.tsx
new file mode 100644
index 0000000..5b6c871
--- /dev/null
+++ b/.history/components/UI/Title_20220520143753.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+}
+
+export const Title: React.FC<Props> = ({ children }) => {
+    return(
+        <div className="Title">
+            <h2>{children}</h2>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/UI/index_20220529001311.ts b/.history/components/UI/index_20220529001311.ts
new file mode 100644
index 0000000..0405156
--- /dev/null
+++ b/.history/components/UI/index_20220529001311.ts
@@ -0,0 +1,7 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220529001312.ts b/.history/components/UI/index_20220529001312.ts
new file mode 100644
index 0000000..e98f300
--- /dev/null
+++ b/.history/components/UI/index_20220529001312.ts
@@ -0,0 +1,7 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220530185810.ts b/.history/components/UI/index_20220530185810.ts
new file mode 100644
index 0000000..558fd0b
--- /dev/null
+++ b/.history/components/UI/index_20220530185810.ts
@@ -0,0 +1,8 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './ButtonImg'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220530185812.ts b/.history/components/UI/index_20220530185812.ts
new file mode 100644
index 0000000..b77fc6e
--- /dev/null
+++ b/.history/components/UI/index_20220530185812.ts
@@ -0,0 +1,8 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220530185814.ts b/.history/components/UI/index_20220530185814.ts
new file mode 100644
index 0000000..39a45c9
--- /dev/null
+++ b/.history/components/UI/index_20220530185814.ts
@@ -0,0 +1,8 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220531215520.ts b/.history/components/UI/index_20220531215520.ts
new file mode 100644
index 0000000..344f8db
--- /dev/null
+++ b/.history/components/UI/index_20220531215520.ts
@@ -0,0 +1,9 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220531215525.ts b/.history/components/UI/index_20220531215525.ts
new file mode 100644
index 0000000..b3fdbd6
--- /dev/null
+++ b/.history/components/UI/index_20220531215525.ts
@@ -0,0 +1,9 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
+export * from './Modal'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220531231701.ts b/.history/components/UI/index_20220531231701.ts
new file mode 100644
index 0000000..8eeeed8
--- /dev/null
+++ b/.history/components/UI/index_20220531231701.ts
@@ -0,0 +1,10 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
+export * from './Modal'
+export * from './InputRadio'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220531231703.ts b/.history/components/UI/index_20220531231703.ts
new file mode 100644
index 0000000..8eeeed8
--- /dev/null
+++ b/.history/components/UI/index_20220531231703.ts
@@ -0,0 +1,10 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
+export * from './Modal'
+export * from './InputRadio'
\ No newline at end of file
diff --git a/.history/components/UI/index_20220617191420.ts b/.history/components/UI/index_20220617191420.ts
new file mode 100644
index 0000000..8eeeed8
--- /dev/null
+++ b/.history/components/UI/index_20220617191420.ts
@@ -0,0 +1,10 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
+export * from './Modal'
+export * from './InputRadio'
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520142020.ts b/.history/components/admin/function/hashPassword_20220520142020.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/function/hashPassword_20220520142046.ts b/.history/components/admin/function/hashPassword_20220520142046.ts
new file mode 100644
index 0000000..4a92376
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520142046.ts
@@ -0,0 +1,10 @@
+var crypto = require('crypto');
+
+const hashPassword = (password, salt, callback) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err, derivedKey) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
+export default hashPassword;
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520142150.ts b/.history/components/admin/function/hashPassword_20220520142150.ts
new file mode 100644
index 0000000..e0c4808
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520142150.ts
@@ -0,0 +1,10 @@
+var crypto = require('crypto');
+
+export const hashPassword: React.FC = (password:string, salt:string, callback:) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err, derivedKey) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
+export default hashPassword;
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520142548.ts b/.history/components/admin/function/hashPassword_20220520142548.ts
new file mode 100644
index 0000000..22c557d
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520142548.ts
@@ -0,0 +1,10 @@
+var crypto = require('crypto');
+
+export const hashPassword: React.FC = (password:string, salt:string, callback:callback) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err, derivedKey) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
+export default hashPassword;
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520142625.ts b/.history/components/admin/function/hashPassword_20220520142625.ts
new file mode 100644
index 0000000..b4e83b6
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520142625.ts
@@ -0,0 +1,9 @@
+var crypto = require('crypto');
+
+export const HashPassword: React.FC = (password:string, salt:string, callback: () => void) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err, derivedKey) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520142810.ts b/.history/components/admin/function/hashPassword_20220520142810.ts
new file mode 100644
index 0000000..9534126
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520142810.ts
@@ -0,0 +1,9 @@
+var crypto = require('crypto');
+
+export const HashPassword: React.FC = (password:string, salt:string, callback: () => void) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143020.ts b/.history/components/admin/function/hashPassword_20220520143020.ts
new file mode 100644
index 0000000..c0bf06c
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143020.ts
@@ -0,0 +1,13 @@
+var crypto = require('crypto');
+
+export const HashPassword: React.FC = (password:string, salt:string, callback: () => void) => {
+    crypto.pbkdf2(password, this.salt, 1000, 32, function(err, buff) {
+        if (err) return cb(err);
+        cb(null, buff.toString('hex'));
+      });
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143123.ts b/.history/components/admin/function/hashPassword_20220520143123.ts
new file mode 100644
index 0000000..c6fccea
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143123.ts
@@ -0,0 +1,9 @@
+var crypto = require('crypto');
+
+export const HashPassword: React.FC<(password:string, salt:string, callback: () => void)> => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143229.ts b/.history/components/admin/function/hashPassword_20220520143229.ts
new file mode 100644
index 0000000..3a103be
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143229.ts
@@ -0,0 +1,9 @@
+var crypto = require('crypto');
+
+export const HashPassword: React.FC<CartItemProps> <(password:string, salt:string, callback: () => void)> => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143306.ts b/.history/components/admin/function/hashPassword_20220520143306.ts
new file mode 100644
index 0000000..8fc89d1
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143306.ts
@@ -0,0 +1,15 @@
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props>  => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143312.ts b/.history/components/admin/function/hashPassword_20220520143312.ts
new file mode 100644
index 0000000..bcdabb7
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143312.ts
@@ -0,0 +1,15 @@
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143329.ts b/.history/components/admin/function/hashPassword_20220520143329.ts
new file mode 100644
index 0000000..6fe9e34
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143329.ts
@@ -0,0 +1,15 @@
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({}) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143346.ts b/.history/components/admin/function/hashPassword_20220520143346.ts
new file mode 100644
index 0000000..8203a6d
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143346.ts
@@ -0,0 +1,15 @@
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143401.ts b/.history/components/admin/function/hashPassword_20220520143401.ts
new file mode 100644
index 0000000..8203a6d
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143401.ts
@@ -0,0 +1,15 @@
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143407.ts b/.history/components/admin/function/hashPassword_20220520143407.ts
new file mode 100644
index 0000000..2cd28cb
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143407.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143424.ts b/.history/components/admin/function/hashPassword_20220520143424.ts
new file mode 100644
index 0000000..d7a7a5d
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143424.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: (() => void);
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        // Printing the derived key
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143540.ts b/.history/components/admin/function/hashPassword_20220520143540.ts
new file mode 100644
index 0000000..6b30821
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143540.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: (() => void);
+  };
+
+export const HashPassword: React.FC<Props> => {
+   // crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+   //     if (err) throw err;
+      //  callback(derivedKey.toString('hex'));
+    // });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143557.ts b/.history/components/admin/function/hashPassword_20220520143557.ts
new file mode 100644
index 0000000..152d383
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143557.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: (() => void);
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143759.ts b/.history/components/admin/function/hashPassword_20220520143759.ts
new file mode 100644
index 0000000..152d383
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143759.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: (() => void);
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520143845.ts b/.history/components/admin/function/hashPassword_20220520143845.ts
new file mode 100644
index 0000000..d71bbf5
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520143845.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144158.ts b/.history/components/admin/function/hashPassword_20220520144158.ts
new file mode 100644
index 0000000..30cda2b
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144158.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback: }) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144205.ts b/.history/components/admin/function/hashPassword_20220520144205.ts
new file mode 100644
index 0000000..045d756
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144205.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback: ()}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144215.ts b/.history/components/admin/function/hashPassword_20220520144215.ts
new file mode 100644
index 0000000..925c983
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144215.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback: (arg:)}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144227.ts b/.history/components/admin/function/hashPassword_20220520144227.ts
new file mode 100644
index 0000000..4216169
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144227.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: () => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback: (arg: any)}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144353.ts b/.history/components/admin/function/hashPassword_20220520144353.ts
new file mode 100644
index 0000000..f636840
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144353.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: (arg: any) => void;
+  };
+
+export const HashPassword: React.FC<Props> = ({password, salt, callback: (arg: any) => void}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144413.ts b/.history/components/admin/function/hashPassword_20220520144413.ts
new file mode 100644
index 0000000..d92a4e3
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144413.ts
@@ -0,0 +1,15 @@
+import React from 'react';
+var crypto = require('crypto');
+
+type Props = {
+    password: string;
+    salt: string;
+    callback: (arg: any) => void;
+  };
+
+export function HashPassword({password, salt, callback: (arg: any) => void}) => {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144534.ts b/.history/components/admin/function/hashPassword_20220520144534.ts
new file mode 100644
index 0000000..d1eb624
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144534.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+var crypto = require('crypto');
+
+
+export function HashPassword(password: string, salt: string, callback: (arg: string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144559.ts b/.history/components/admin/function/hashPassword_20220520144559.ts
new file mode 100644
index 0000000..5167c1d
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144559.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+var crypto = require('crypto');
+
+
+export function HashPassword(password: string, salt: string, callback: (arg: string, index:string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144606.ts b/.history/components/admin/function/hashPassword_20220520144606.ts
new file mode 100644
index 0000000..5ad6f3d
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144606.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+var crypto = require('crypto');
+
+
+export function HashPassword(password: string, salt: string, callback: (arg: string, index?:string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144632.ts b/.history/components/admin/function/hashPassword_20220520144632.ts
new file mode 100644
index 0000000..8b0a098
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144632.ts
@@ -0,0 +1,8 @@
+var crypto = require('crypto');
+
+export function HashPassword(password: string, salt: string, callback: (arg: string, index?:string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: string) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144758.ts b/.history/components/admin/function/hashPassword_20220520144758.ts
new file mode 100644
index 0000000..6c5dcac
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144758.ts
@@ -0,0 +1,8 @@
+var crypto = require('crypto');
+
+export function HashPassword(password: string, salt: string, callback: (arg: string, index?:string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: Buffer) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/hashPassword_20220520144806.ts b/.history/components/admin/function/hashPassword_20220520144806.ts
new file mode 100644
index 0000000..991e6bb
--- /dev/null
+++ b/.history/components/admin/function/hashPassword_20220520144806.ts
@@ -0,0 +1,8 @@
+var crypto = require('crypto');
+
+export function HashPassword(password: string, salt: string, callback: (arg: string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: Buffer) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/postData_20220520181446.ts b/.history/components/admin/function/postData_20220520181446.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/function/postData_20220520181459.ts b/.history/components/admin/function/postData_20220520181459.ts
new file mode 100644
index 0000000..5aa649a
--- /dev/null
+++ b/.history/components/admin/function/postData_20220520181459.ts
@@ -0,0 +1,19 @@
+async function postData(url = '', data = {}) {
+    // Default options are marked with *
+    const response = await fetch(url, {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: 'follow', // manual, *follow, error
+      referrerPolicy: 'no-referrer', // no-referrer, *client
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    });
+    return await response.json(); // parses JSON response into native JavaScript objects
+  }
+
+  export default postData;
\ No newline at end of file
diff --git a/.history/components/admin/function/postData_20220520181921.ts b/.history/components/admin/function/postData_20220520181921.ts
new file mode 100644
index 0000000..a312292
--- /dev/null
+++ b/.history/components/admin/function/postData_20220520181921.ts
@@ -0,0 +1,20 @@
+async function postData(url = '', data = {}) {
+    // Default options are marked with *
+    console.log(url);
+    const response = await fetch(url, {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: 'follow', // manual, *follow, error
+      referrerPolicy: 'no-referrer', // no-referrer, *client
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    });
+    return await response.json(); // parses JSON response into native JavaScript objects
+  }
+
+  export default postData;
\ No newline at end of file
diff --git a/.history/components/admin/function/postData_20220520181955.ts b/.history/components/admin/function/postData_20220520181955.ts
new file mode 100644
index 0000000..8be5838
--- /dev/null
+++ b/.history/components/admin/function/postData_20220520181955.ts
@@ -0,0 +1,20 @@
+async function postData(url = '', data = {}) {
+    // Default options are marked with *
+    console.log(data);
+    const response = await fetch(url, {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: 'follow', // manual, *follow, error
+      referrerPolicy: 'no-referrer', // no-referrer, *client
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    });
+    return await response.json(); // parses JSON response into native JavaScript objects
+  }
+
+  export default postData;
\ No newline at end of file
diff --git a/.history/components/admin/function/postData_20220520182127.ts b/.history/components/admin/function/postData_20220520182127.ts
new file mode 100644
index 0000000..5aa649a
--- /dev/null
+++ b/.history/components/admin/function/postData_20220520182127.ts
@@ -0,0 +1,19 @@
+async function postData(url = '', data = {}) {
+    // Default options are marked with *
+    const response = await fetch(url, {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: 'follow', // manual, *follow, error
+      referrerPolicy: 'no-referrer', // no-referrer, *client
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    });
+    return await response.json(); // parses JSON response into native JavaScript objects
+  }
+
+  export default postData;
\ No newline at end of file
diff --git a/.history/components/admin/function/useToken_20220520191606.ts b/.history/components/admin/function/useToken_20220520191606.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/function/useToken_20220520191615.ts b/.history/components/admin/function/useToken_20220520191615.ts
new file mode 100644
index 0000000..3e9e4b6
--- /dev/null
+++ b/.history/components/admin/function/useToken_20220520191615.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+
+export default function useToken() {
+  const [token, setToken] = useState('');
+  useEffect(() => setToken(localStorage.getItem("token")), []);
+  const saveToken = userToken => {
+    localStorage.setItem('token', JSON.stringify(userToken));
+    setToken(userToken?.token);
+  };
+
+  return {
+    setToken: saveToken,
+    token
+  }
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/useToken_20220520191707.ts b/.history/components/admin/function/useToken_20220520191707.ts
new file mode 100644
index 0000000..f98b720
--- /dev/null
+++ b/.history/components/admin/function/useToken_20220520191707.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect, SetStateAction } from 'react';
+
+
+export default function useToken() {
+  const [token, setToken] = useState('');
+  useEffect(() => setToken(localStorage.getItem("token")), []);
+  const saveToken = (userToken: { token: SetStateAction<string>; }) => {
+    localStorage.setItem('token', JSON.stringify(userToken));
+    setToken(userToken?.token);
+  };
+
+  return {
+    setToken: saveToken,
+    token
+  }
+}
\ No newline at end of file
diff --git a/.history/components/admin/function/useToken_20220520191812.ts b/.history/components/admin/function/useToken_20220520191812.ts
new file mode 100644
index 0000000..f909e47
--- /dev/null
+++ b/.history/components/admin/function/useToken_20220520191812.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect, SetStateAction } from 'react';
+
+
+export default function useToken() {
+  const [token, setToken] = useState('');
+  useEffect(() => setToken(localStorage.getItem("token") || ""), []);
+  const saveToken = (userToken: { token: SetStateAction<string>; }) => {
+    localStorage.setItem('token', JSON.stringify(userToken));
+    setToken(userToken?.token);
+  };
+
+  return {
+    setToken: saveToken,
+    token
+  }
+}
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522133602.ts b/.history/components/admin/pages/Root/Main_20220522133602.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/Root/Main_20220522133649.ts b/.history/components/admin/pages/Root/Main_20220522133649.ts
new file mode 100644
index 0000000..9977151
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522133649.ts
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+
+
+export const Main: React.FC = () => {
+    
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/Root/Main_20220522133733.ts b/.history/components/admin/pages/Root/Main_20220522133733.ts
new file mode 100644
index 0000000..a552c93
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522133733.ts
@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+
+export const Entrance: React.FC = () => {
+
+     }
+    return(
+        <> Main </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/Root/Main_20220522133759.tsx b/.history/components/admin/pages/Root/Main_20220522133759.tsx
new file mode 100644
index 0000000..de10280
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522133759.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522133800.ts b/.history/components/admin/pages/Root/Main_20220522133800.ts
new file mode 100644
index 0000000..de10280
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522133800.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522133815.tsx b/.history/components/admin/pages/Root/Main_20220522133815.tsx
new file mode 100644
index 0000000..3dfccd6
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522133815.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522133928.tsx b/.history/components/admin/pages/Root/Main_20220522133928.tsx
new file mode 100644
index 0000000..63a6804
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522133928.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const MainLayoutRoot: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522134113.tsx b/.history/components/admin/pages/Root/Main_20220522134113.tsx
new file mode 100644
index 0000000..73bbef4
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522134113.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const MainLayoutRoot: React.FC<Props> = () => {
+  return (
+    <div className="wrapper">
+      <div className="content">
+
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522134427.tsx b/.history/components/admin/pages/Root/Main_20220522134427.tsx
new file mode 100644
index 0000000..a2c4cd5
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522134427.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const MainLayoutRoot: React.FC = () => {
+  return (
+    <div className="wrapper">
+      <div className="content">
+
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/Root/Main_20220522134726.tsx b/.history/components/admin/pages/Root/Main_20220522134726.tsx
new file mode 100644
index 0000000..8b2d2c2
--- /dev/null
+++ b/.history/components/admin/pages/Root/Main_20220522134726.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const MainLayoutRoot: React.FC = () => {
+  return (
+    <div className="wrapper">
+      <div className="content">
+ ffdgfdgdfgdf dfg fddf dfg dfgdf 
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518151911.tsx b/.history/components/admin/pages/login/EnteringCode_20220518151911.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518151920.tsx b/.history/components/admin/pages/login/EnteringCode_20220518151920.tsx
new file mode 100644
index 0000000..cc7bfd1
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringCode_20220518151920.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import Button from '../../component/Button';
+import Input from '../../component/Input.jsx';
+import Label from '../../component/Label';
+import Title from '../../component/Title';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518152116.tsx b/.history/components/admin/pages/login/EnteringCode_20220518152116.tsx
new file mode 100644
index 0000000..cc7bfd1
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringCode_20220518152116.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import Button from '../../component/Button';
+import Input from '../../component/Input.jsx';
+import Label from '../../component/Label';
+import Title from '../../component/Title';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518153226.tsx b/.history/components/admin/pages/login/EnteringCode_20220518153226.tsx
new file mode 100644
index 0000000..8b4f1f4
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringCode_20220518153226.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Button, } from '../../../UI';
+import Input from '../../component/Input.jsx';
+import Label from '../../component/Label';
+import Title from '../../component/Title';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518154309.tsx b/.history/components/admin/pages/login/EnteringCode_20220518154309.tsx
new file mode 100644
index 0000000..d638f78
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringCode_20220518154309.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Button, Input } from '../../../UI';
+
+import Label from '../../component/Label';
+import Title from '../../component/Title';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518154538.tsx b/.history/components/admin/pages/login/EnteringCode_20220518154538.tsx
new file mode 100644
index 0000000..c9dd2e7
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringCode_20220518154538.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Button, Input, Label } from '../../../UI';
+
+import Title from '../../component/Title';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/.history/components/admin/pages/login/EnteringCode_20220518154748.tsx b/.history/components/admin/pages/login/EnteringCode_20220518154748.tsx
new file mode 100644
index 0000000..3ef9c63
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringCode_20220518154748.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Button, Input, Label, Title } from '../../../UI';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/.history/components/admin/pages/login/EnteringMail_20220518151943.tsx b/.history/components/admin/pages/login/EnteringMail_20220518151943.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/EnteringMail_20220518152107.tsx b/.history/components/admin/pages/login/EnteringMail_20220518152107.tsx
new file mode 100644
index 0000000..3189ac0
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringMail_20220518152107.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../component/Button';
+import Input from '../../component/Input';
+import LinkButton from '../../component/LinkButton';
+import Title from '../../component/Title';
+import postData from '../../function/postData';
+import SmallText from '../../component/SmallText';
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/EnteringMail_20220520130828.tsx b/.history/components/admin/pages/login/EnteringMail_20220520130828.tsx
new file mode 100644
index 0000000..30bc6f2
--- /dev/null
+++ b/.history/components/admin/pages/login/EnteringMail_20220520130828.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../component/Button';
+import Input from '../../component/Input';
+import LinkButton from '../../component/LinkButton';
+import Title from '../../component/Title';
+import postData from '../../function/postData';
+import SmallText from '../../component/SmallText';
+
+const EntranceMail = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Entrance_20220520130511.tsx b/.history/components/admin/pages/login/Entrance_20220520130511.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/Entrance_20220520130523.tsx b/.history/components/admin/pages/login/Entrance_20220520130523.tsx
new file mode 100644
index 0000000..30e2d28
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520130523.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => reset}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520130950.tsx b/.history/components/admin/pages/login/Entrance_20220520130950.tsx
new file mode 100644
index 0000000..30e2d28
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520130950.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => reset}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520133039.tsx b/.history/components/admin/pages/login/Entrance_20220520133039.tsx
new file mode 100644
index 0000000..103ce26
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520133039.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => reset}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520133133.tsx b/.history/components/admin/pages/login/Entrance_20220520133133.tsx
new file mode 100644
index 0000000..2582cca
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520133133.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'nome'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520133140.tsx b/.history/components/admin/pages/login/Entrance_20220520133140.tsx
new file mode 100644
index 0000000..f798274
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520133140.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520133329.tsx b/.history/components/admin/pages/login/Entrance_20220520133329.tsx
new file mode 100644
index 0000000..feef7dd
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520133329.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={'button_align_right'} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520133352.tsx b/.history/components/admin/pages/login/Entrance_20220520133352.tsx
new file mode 100644
index 0000000..f798274
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520133352.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520134057.tsx b/.history/components/admin/pages/login/Entrance_20220520134057.tsx
new file mode 100644
index 0000000..cb31b17
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520134057.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+      console.log(_data);
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520135855.tsx b/.history/components/admin/pages/login/Entrance_20220520135855.tsx
new file mode 100644
index 0000000..c5bc8f0
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520135855.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520181434.tsx b/.history/components/admin/pages/login/Entrance_20220520181434.tsx
new file mode 100644
index 0000000..6efd129
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520181434.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520181612.tsx b/.history/components/admin/pages/login/Entrance_20220520181612.tsx
new file mode 100644
index 0000000..72ad5ef
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520181612.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520181736.tsx b/.history/components/admin/pages/login/Entrance_20220520181736.tsx
new file mode 100644
index 0000000..525d31c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520181736.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520181842.tsx b/.history/components/admin/pages/login/Entrance_20220520181842.tsx
new file mode 100644
index 0000000..525d31c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520181842.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520182312.tsx b/.history/components/admin/pages/login/Entrance_20220520182312.tsx
new file mode 100644
index 0000000..fae54bd
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520182312.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ? setToken(data) : setInformation(data.error);
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520182335.tsx b/.history/components/admin/pages/login/Entrance_20220520182335.tsx
new file mode 100644
index 0000000..8da6db7
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520182335.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ? setToken(data) : setInformation(data.error);
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520182338.tsx b/.history/components/admin/pages/login/Entrance_20220520182338.tsx
new file mode 100644
index 0000000..c71383e
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520182338.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ? setToken(data) : setInformation(data.error);
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520182448.tsx b/.history/components/admin/pages/login/Entrance_20220520182448.tsx
new file mode 100644
index 0000000..967594b
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520182448.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                //data.token ?
+               // setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520191522.tsx b/.history/components/admin/pages/login/Entrance_20220520191522.tsx
new file mode 100644
index 0000000..2130d6c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520191522.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Entrance_20220520191848.tsx b/.history/components/admin/pages/login/Entrance_20220520191848.tsx
new file mode 100644
index 0000000..e8523c5
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520191848.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export const Entrance: React.FC = (setToken) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220520191921.tsx b/.history/components/admin/pages/login/Entrance_20220520191921.tsx
new file mode 100644
index 0000000..228741e
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520191921.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+type PizzaBlockProps = {
+    setToken: string
+  }
+
+export const Entrance: React.FC = (setToken) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220520191932.tsx b/.history/components/admin/pages/login/Entrance_20220520191932.tsx
new file mode 100644
index 0000000..4883cd3
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520191932.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+type PizzaBlockProps = {
+    setToken: string
+  }
+
+export const Entrance: React.FC<PizzaBlockProps> = (setToken) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220520192005.tsx b/.history/components/admin/pages/login/Entrance_20220520192005.tsx
new file mode 100644
index 0000000..69ada2e
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220520192005.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123254.tsx b/.history/components/admin/pages/login/Entrance_20220521123254.tsx
new file mode 100644
index 0000000..0428718
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123254.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123347.tsx b/.history/components/admin/pages/login/Entrance_20220521123347.tsx
new file mode 100644
index 0000000..16b2b26
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123347.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123433.tsx b/.history/components/admin/pages/login/Entrance_20220521123433.tsx
new file mode 100644
index 0000000..1d4f556
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123433.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchPizzas } from '../../../../redux/login/asyncActions';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123451.tsx b/.history/components/admin/pages/login/Entrance_20220521123451.tsx
new file mode 100644
index 0000000..0e9a87a
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123451.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123534.tsx b/.history/components/admin/pages/login/Entrance_20220521123534.tsx
new file mode 100644
index 0000000..cf2e042
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123534.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { SearchPizzaParams } from '../../../../redux/login/types';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123616.tsx b/.history/components/admin/pages/login/Entrance_20220521123616.tsx
new file mode 100644
index 0000000..41a98f1
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123616.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123734.tsx b/.history/components/admin/pages/login/Entrance_20220521123734.tsx
new file mode 100644
index 0000000..76895f4
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123734.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const [information, setInformation] = useState('');
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521123916.tsx b/.history/components/admin/pages/login/Entrance_20220521123916.tsx
new file mode 100644
index 0000000..cd98dc6
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521123916.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {    
+        dispatch(
+          fetchToken({
+            login,
+            password,
+            category,
+            search,
+            currentPage: String(currentPage),
+          }),
+        );
+    
+        window.scrollTo(0, 0);
+      };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521124051.tsx b/.history/components/admin/pages/login/Entrance_20220521124051.tsx
new file mode 100644
index 0000000..202d2fc
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521124051.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521124825.tsx b/.history/components/admin/pages/login/Entrance_20220521124825.tsx
new file mode 100644
index 0000000..025e253
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521124825.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521124924.tsx b/.history/components/admin/pages/login/Entrance_20220521124924.tsx
new file mode 100644
index 0000000..bdc32a2
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521124924.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+    console.log(status);
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521124955.tsx b/.history/components/admin/pages/login/Entrance_20220521124955.tsx
new file mode 100644
index 0000000..452f862
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521124955.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+    console.log(token);
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521124959.tsx b/.history/components/admin/pages/login/Entrance_20220521124959.tsx
new file mode 100644
index 0000000..2428e23
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521124959.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+   
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+      console.log(token);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521125049.tsx b/.history/components/admin/pages/login/Entrance_20220521125049.tsx
new file mode 100644
index 0000000..62c8df1
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521125049.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+      console.log(token);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521125223.tsx b/.history/components/admin/pages/login/Entrance_20220521125223.tsx
new file mode 100644
index 0000000..fe5dfed
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521125223.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+      console.log(status);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521125259.tsx b/.history/components/admin/pages/login/Entrance_20220521125259.tsx
new file mode 100644
index 0000000..fe5dfed
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521125259.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      };
+      console.log(status);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521125329.tsx b/.history/components/admin/pages/login/Entrance_20220521125329.tsx
new file mode 100644
index 0000000..3906018
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521125329.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(status);
+      };
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521125349.tsx b/.history/components/admin/pages/login/Entrance_20220521125349.tsx
new file mode 100644
index 0000000..e9a2aee
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521125349.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521130320.tsx b/.history/components/admin/pages/login/Entrance_20220521130320.tsx
new file mode 100644
index 0000000..e9a2aee
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521130320.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521130645.tsx b/.history/components/admin/pages/login/Entrance_20220521130645.tsx
new file mode 100644
index 0000000..e9a2aee
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521130645.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521130833.tsx b/.history/components/admin/pages/login/Entrance_20220521130833.tsx
new file mode 100644
index 0000000..186ffe1
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521130833.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521130906.tsx b/.history/components/admin/pages/login/Entrance_20220521130906.tsx
new file mode 100644
index 0000000..186ffe1
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521130906.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521130947.tsx b/.history/components/admin/pages/login/Entrance_20220521130947.tsx
new file mode 100644
index 0000000..1a4892a
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521130947.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131025.tsx b/.history/components/admin/pages/login/Entrance_20220521131025.tsx
new file mode 100644
index 0000000..9fe03ee
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131025.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131120.tsx b/.history/components/admin/pages/login/Entrance_20220521131120.tsx
new file mode 100644
index 0000000..5ba8632
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131120.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+    console.log(params);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131146.tsx b/.history/components/admin/pages/login/Entrance_20220521131146.tsx
new file mode 100644
index 0000000..623981c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131146.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    const params = qs.parse(window.location.search.substring(1) || '') as unknown as LoginParams;
+    console.log(params);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131228.tsx b/.history/components/admin/pages/login/Entrance_20220521131228.tsx
new file mode 100644
index 0000000..82d191e
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131228.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    const params = qs.parse(location.search.substring(1)) as unknown as LoginParams;
+    console.log(params);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131248.tsx b/.history/components/admin/pages/login/Entrance_20220521131248.tsx
new file mode 100644
index 0000000..5ba8632
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131248.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+    const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+    console.log(params);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131345.tsx b/.history/components/admin/pages/login/Entrance_20220521131345.tsx
new file mode 100644
index 0000000..ef8f383
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131345.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      
+    const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+    console.log(params);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131359.tsx b/.history/components/admin/pages/login/Entrance_20220521131359.tsx
new file mode 100644
index 0000000..df3a0b9
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131359.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      React.useEffect(() => {
+    const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+    console.log(params);
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131415.tsx b/.history/components/admin/pages/login/Entrance_20220521131415.tsx
new file mode 100644
index 0000000..76a0916
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131415.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+    
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521131503.tsx b/.history/components/admin/pages/login/Entrance_20220521131503.tsx
new file mode 100644
index 0000000..415052f
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521131503.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521132632.tsx b/.history/components/admin/pages/login/Entrance_20220521132632.tsx
new file mode 100644
index 0000000..0fdc6b5
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521132632.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521132639.tsx b/.history/components/admin/pages/login/Entrance_20220521132639.tsx
new file mode 100644
index 0000000..aeb483b
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521132639.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(status_token);
+      };
+      React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521132712.tsx b/.history/components/admin/pages/login/Entrance_20220521132712.tsx
new file mode 100644
index 0000000..0fdc6b5
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521132712.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+      };
+      React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521133204.tsx b/.history/components/admin/pages/login/Entrance_20220521133204.tsx
new file mode 100644
index 0000000..aeb483b
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521133204.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(status_token);
+      };
+      React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521133706.tsx b/.history/components/admin/pages/login/Entrance_20220521133706.tsx
new file mode 100644
index 0000000..9fff253
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521133706.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(status_token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521133709.tsx b/.history/components/admin/pages/login/Entrance_20220521133709.tsx
new file mode 100644
index 0000000..a48b776
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521133709.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(status_token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521133738.tsx b/.history/components/admin/pages/login/Entrance_20220521133738.tsx
new file mode 100644
index 0000000..a48b776
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521133738.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(status_token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521133742.tsx b/.history/components/admin/pages/login/Entrance_20220521133742.tsx
new file mode 100644
index 0000000..1dad9ac
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521133742.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521133956.tsx b/.history/components/admin/pages/login/Entrance_20220521133956.tsx
new file mode 100644
index 0000000..dca02fe
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521133956.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        token[0].token ?
+        console.log(token[0].token)
+        //setToken(token[0].token) :
+        : setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521134011.tsx b/.history/components/admin/pages/login/Entrance_20220521134011.tsx
new file mode 100644
index 0000000..0e42e4f
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521134011.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+        token ?
+        console.log(token[0].token)
+        //setToken(token[0].token) :
+        : setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521134044.tsx b/.history/components/admin/pages/login/Entrance_20220521134044.tsx
new file mode 100644
index 0000000..6491de7
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521134044.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      //  token ?
+        console.log(token[0].token)
+        //setToken(token[0].token) :
+       // : setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521134055.tsx b/.history/components/admin/pages/login/Entrance_20220521134055.tsx
new file mode 100644
index 0000000..1f38dd5
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521134055.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // : setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521134110.tsx b/.history/components/admin/pages/login/Entrance_20220521134110.tsx
new file mode 100644
index 0000000..3207ef8
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521134110.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState('');
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password),
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // : 
+        setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220521134349.tsx b/.history/components/admin/pages/login/Entrance_20220521134349.tsx
new file mode 100644
index 0000000..9e97be0
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220521134349.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // : 
+        //setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522073245.tsx b/.history/components/admin/pages/login/Entrance_20220522073245.tsx
new file mode 100644
index 0000000..10a855c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522073245.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import postData from '../../function/postData';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522073434.tsx b/.history/components/admin/pages/login/Entrance_20220522073434.tsx
new file mode 100644
index 0000000..98f42b7
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522073434.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522073515.tsx b/.history/components/admin/pages/login/Entrance_20220522073515.tsx
new file mode 100644
index 0000000..dd80ab0
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522073515.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522073542.tsx b/.history/components/admin/pages/login/Entrance_20220522073542.tsx
new file mode 100644
index 0000000..0e54717
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522073542.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522073956.tsx b/.history/components/admin/pages/login/Entrance_20220522073956.tsx
new file mode 100644
index 0000000..c57158e
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522073956.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(token[0]);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074010.tsx b/.history/components/admin/pages/login/Entrance_20220522074010.tsx
new file mode 100644
index 0000000..dce5977
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074010.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(token[1]);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074030.tsx b/.history/components/admin/pages/login/Entrance_20220522074030.tsx
new file mode 100644
index 0000000..0e54717
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074030.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074120.tsx b/.history/components/admin/pages/login/Entrance_20220522074120.tsx
new file mode 100644
index 0000000..da4ca43
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074120.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074138.tsx b/.history/components/admin/pages/login/Entrance_20220522074138.tsx
new file mode 100644
index 0000000..8bee08b
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074138.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token[0]));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074257.tsx b/.history/components/admin/pages/login/Entrance_20220522074257.tsx
new file mode 100644
index 0000000..3baa022
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074257.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(token.token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074307.tsx b/.history/components/admin/pages/login/Entrance_20220522074307.tsx
new file mode 100644
index 0000000..0e54717
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074307.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(token);
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074340.tsx b/.history/components/admin/pages/login/Entrance_20220522074340.tsx
new file mode 100644
index 0000000..976c4f7
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074340.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.parse(token));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074359.tsx b/.history/components/admin/pages/login/Entrance_20220522074359.tsx
new file mode 100644
index 0000000..2f88514
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074359.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.parse(token.));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074417.tsx b/.history/components/admin/pages/login/Entrance_20220522074417.tsx
new file mode 100644
index 0000000..da4ca43
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074417.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522074929.tsx b/.history/components/admin/pages/login/Entrance_20220522074929.tsx
new file mode 100644
index 0000000..fba175c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522074929.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key, value) {
+        console.log(typeof value);
+        if (key === 'email') {
+          return undefined;
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075016.tsx b/.history/components/admin/pages/login/Entrance_20220522075016.tsx
new file mode 100644
index 0000000..0303d93
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075016.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'email') {
+          return undefined;
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075038.tsx b/.history/components/admin/pages/login/Entrance_20220522075038.tsx
new file mode 100644
index 0000000..e389dcd
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075038.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+          return undefined;
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075123.tsx b/.history/components/admin/pages/login/Entrance_20220522075123.tsx
new file mode 100644
index 0000000..fb5a76b
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075123.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+          console.log(value);
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075148.tsx b/.history/components/admin/pages/login/Entrance_20220522075148.tsx
new file mode 100644
index 0000000..76948b2
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075148.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+          console.log(value);
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075439.tsx b/.history/components/admin/pages/login/Entrance_20220522075439.tsx
new file mode 100644
index 0000000..4c42861
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075439.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075600.tsx b/.history/components/admin/pages/login/Entrance_20220522075600.tsx
new file mode 100644
index 0000000..e06657c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075600.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    name: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075610.tsx b/.history/components/admin/pages/login/Entrance_20220522075610.tsx
new file mode 100644
index 0000000..cc206db
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075610.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    name: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075637.tsx b/.history/components/admin/pages/login/Entrance_20220522075637.tsx
new file mode 100644
index 0000000..8738012
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075637.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    value: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075700.tsx b/.history/components/admin/pages/login/Entrance_20220522075700.tsx
new file mode 100644
index 0000000..8738012
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075700.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    value: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075911.tsx b/.history/components/admin/pages/login/Entrance_20220522075911.tsx
new file mode 100644
index 0000000..74d3171
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075911.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522075919.tsx b/.history/components/admin/pages/login/Entrance_20220522075919.tsx
new file mode 100644
index 0000000..8ba1147
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522075919.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken[]>([]);
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080022.tsx b/.history/components/admin/pages/login/Entrance_20220522080022.tsx
new file mode 100644
index 0000000..ff33c56
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080022.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken[]>(undefined);
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080031.tsx b/.history/components/admin/pages/login/Entrance_20220522080031.tsx
new file mode 100644
index 0000000..b5f7aab
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080031.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken | >(undefined);
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080050.tsx b/.history/components/admin/pages/login/Entrance_20220522080050.tsx
new file mode 100644
index 0000000..9f819ff
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080050.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<IToken | undefined>(undefined);
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080202.tsx b/.history/components/admin/pages/login/Entrance_20220522080202.tsx
new file mode 100644
index 0000000..d6c0b9c
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080202.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080254.tsx b/.history/components/admin/pages/login/Entrance_20220522080254.tsx
new file mode 100644
index 0000000..fabc982
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080254.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+interface IToken {
+    connected: boolean;
+    type: string;
+  }
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080327.tsx b/.history/components/admin/pages/login/Entrance_20220522080327.tsx
new file mode 100644
index 0000000..7314e94
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080327.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = async () => {
+        //console.log(_data);
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+        JSON.stringify(token, replacer)
+        //console.log(JSON.stringify(token, replacer));
+    };
+
+    React.useEffect(() => {
+        const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+        console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080421.tsx b/.history/components/admin/pages/login/Entrance_20220522080421.tsx
new file mode 100644
index 0000000..8488762
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080421.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = async () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    React.useEffect(() => {
+      //  const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+       // console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080614.tsx b/.history/components/admin/pages/login/Entrance_20220522080614.tsx
new file mode 100644
index 0000000..b03b7c0
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080614.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+    console.log('123');
+    const getToken = async () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    React.useEffect(() => {
+      //  const params = qs.parse(window.location.search.substring(1)) as unknown as LoginParams;
+       // console.log(params);
+    }, []);
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080648.tsx b/.history/components/admin/pages/login/Entrance_20220522080648.tsx
new file mode 100644
index 0000000..307aba8
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080648.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+    console.log('123');
+    const getToken = async () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+  
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080810.tsx b/.history/components/admin/pages/login/Entrance_20220522080810.tsx
new file mode 100644
index 0000000..5084b79
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080810.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+    console.log('123');
+    const getToken = async () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522080832.tsx b/.history/components/admin/pages/login/Entrance_20220522080832.tsx
new file mode 100644
index 0000000..229989e
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522080832.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'qs';
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { LoginParams } from '../../../../redux/login/types';
+import { selectTokenData } from '../../../../redux/login/selectors';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+    console.log('123');
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522081104.tsx b/.history/components/admin/pages/login/Entrance_20220522081104.tsx
new file mode 100644
index 0000000..a1b4ea5
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522081104.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522133012.tsx b/.history/components/admin/pages/login/Entrance_20220522133012.tsx
new file mode 100644
index 0000000..c0dd05b
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522133012.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key !== 'error') {
+            value = '';
+        }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        setInformation(JSON.stringify(token, replacer));
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522133046.tsx b/.history/components/admin/pages/login/Entrance_20220522133046.tsx
new file mode 100644
index 0000000..bb18cd8
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522133046.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            value = '';
+        }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        setInformation(JSON.stringify(token, replacer));
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522133121.tsx b/.history/components/admin/pages/login/Entrance_20220522133121.tsx
new file mode 100644
index 0000000..b565e44
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522133121.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            value = 'd';
+        }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        setInformation(JSON.stringify(token, replacer));
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522133131.tsx b/.history/components/admin/pages/login/Entrance_20220522133131.tsx
new file mode 100644
index 0000000..512acc6
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522133131.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key !== 'error') {
+            value = 'd';
+        }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        setInformation(JSON.stringify(token, replacer));
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522133156.tsx b/.history/components/admin/pages/login/Entrance_20220522133156.tsx
new file mode 100644
index 0000000..c10e7a7
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522133156.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key !== 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220522133235.tsx b/.history/components/admin/pages/login/Entrance_20220522133235.tsx
new file mode 100644
index 0000000..a1b4ea5
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220522133235.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        console.log(typeof value);
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password:String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220523185252.tsx b/.history/components/admin/pages/login/Entrance_20220523185252.tsx
new file mode 100644
index 0000000..71328ee
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220523185252.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password: String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220523185335.tsx b/.history/components/admin/pages/login/Entrance_20220523185335.tsx
new file mode 100644
index 0000000..bf094d0
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220523185335.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import type { NextPage } from 'next';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password: String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220523185350.tsx b/.history/components/admin/pages/login/Entrance_20220523185350.tsx
new file mode 100644
index 0000000..0ca7bfc
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220523185350.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import type { NextPage } from 'next';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: NextPage = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        if (key === 'error') {
+            setInformation(value)
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password: String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Entrance_20220523185617.tsx b/.history/components/admin/pages/login/Entrance_20220523185617.tsx
new file mode 100644
index 0000000..a38b376
--- /dev/null
+++ b/.history/components/admin/pages/login/Entrance_20220523185617.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import type { NextPage } from 'next';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: NextPage = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        if (key === 'error') {
+            setInformation(value);
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password: String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/.history/components/admin/pages/login/Index_20220518152004.tsx b/.history/components/admin/pages/login/Index_20220518152004.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/Index_20220518152059.tsx b/.history/components/admin/pages/login/Index_20220518152059.tsx
new file mode 100644
index 0000000..3189ac0
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518152059.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../component/Button';
+import Input from '../../component/Input';
+import LinkButton from '../../component/LinkButton';
+import Title from '../../component/Title';
+import postData from '../../function/postData';
+import SmallText from '../../component/SmallText';
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518154842.tsx b/.history/components/admin/pages/login/Index_20220518154842.tsx
new file mode 100644
index 0000000..94b60ce
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518154842.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Title } from '../../../UI';
+
+
+import LinkButton from '../../component/LinkButton';
+import SmallText from '../../component/SmallText';
+
+import postData from '../../function/postData';
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518155142.tsx b/.history/components/admin/pages/login/Index_20220518155142.tsx
new file mode 100644
index 0000000..a22fcda
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518155142.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title } from '../../../UI';
+
+import SmallText from '../../component/SmallText';
+
+import postData from '../../function/postData';
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518155348.tsx b/.history/components/admin/pages/login/Index_20220518155348.tsx
new file mode 100644
index 0000000..a5eb4f3
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518155348.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518155852.tsx b/.history/components/admin/pages/login/Index_20220518155852.tsx
new file mode 100644
index 0000000..a5eb4f3
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518155852.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518155917.tsx b/.history/components/admin/pages/login/Index_20220518155917.tsx
new file mode 100644
index 0000000..eb8cf5a
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518155917.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518160750.tsx b/.history/components/admin/pages/login/Index_20220518160750.tsx
new file mode 100644
index 0000000..680c8d1
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518160750.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = (e) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data(e)} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518161105.tsx b/.history/components/admin/pages/login/Index_20220518161105.tsx
new file mode 100644
index 0000000..a1929ee
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518161105.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = (e) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518161239.tsx b/.history/components/admin/pages/login/Index_20220518161239.tsx
new file mode 100644
index 0000000..feee55f
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518161239.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = (e) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={(e) => update_Data(e)} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518161330.tsx b/.history/components/admin/pages/login/Index_20220518161330.tsx
new file mode 100644
index 0000000..8b606ab
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518161330.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const Button: update_Data.FC<Props> = ({e}) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={(e) => update_Data(e)} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518161409.tsx b/.history/components/admin/pages/login/Index_20220518161409.tsx
new file mode 100644
index 0000000..239bbaa
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518161409.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+
+
+    const update_Data: React.FC<Props_data> = ({e}) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={(e) => update_Data(e)} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518161525.tsx b/.history/components/admin/pages/login/Index_20220518161525.tsx
new file mode 100644
index 0000000..836b215
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518161525.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+    const update_Data: React.FC<Props_data> = ({name, value}) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data({name, value})} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518162727.tsx b/.history/components/admin/pages/login/Index_20220518162727.tsx
new file mode 100644
index 0000000..9369435
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518162727.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+    const update_Data: React.FC<Props_data> = ({name, value}) => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data(e)} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518162833.tsx b/.history/components/admin/pages/login/Index_20220518162833.tsx
new file mode 100644
index 0000000..54c30f9
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518162833.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+
+
+
+const Entrance = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518163018.tsx b/.history/components/admin/pages/login/Index_20220518163018.tsx
new file mode 100644
index 0000000..b1808da
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518163018.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+const Entrance = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518163242.tsx b/.history/components/admin/pages/login/Index_20220518163242.tsx
new file mode 100644
index 0000000..23760c9
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518163242.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+const Entrance = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => reset}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518163510.tsx b/.history/components/admin/pages/login/Index_20220518163510.tsx
new file mode 100644
index 0000000..7133385
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518163510.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => reset}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220518163527.tsx b/.history/components/admin/pages/login/Index_20220518163527.tsx
new file mode 100644
index 0000000..30e2d28
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220518163527.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, LinkButton, Title, SmallText } from '../../../UI';
+//{setToken, updateData}
+
+export const Entrance: React.FC = () => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    interface Props_data {
+        name: string;
+        value: string;
+        onClick: () => void;
+      }
+
+      const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+      const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+      };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={handleEntrance} align={''} styles={''}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={() => reset}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
diff --git a/.history/components/admin/pages/login/Index_20220520130519.tsx b/.history/components/admin/pages/login/Index_20220520130519.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/Index_20220520130556.tsx b/.history/components/admin/pages/login/Index_20220520130556.tsx
new file mode 100644
index 0000000..bd5ffc1
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520130556.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+
+
+
+const Login = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = e => {
+        setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            {
+                0: <Entrance updateData={(e) => updateData(e)} setToken={setToken}/>,
+                1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+                2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+                3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520130622.tsx b/.history/components/admin/pages/login/Index_20220520130622.tsx
new file mode 100644
index 0000000..bb618b4
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520130622.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = e => {
+        setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            {
+                0: <Entrance updateData={(e) => updateData(e)} setToken={setToken}/>,
+                1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+                2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+                3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520130709.tsx b/.history/components/admin/pages/login/Index_20220520130709.tsx
new file mode 100644
index 0000000..d010f07
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520130709.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import Entrance from './EnteringMail';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            {
+                0: <Entrance updateData={(e) => updateData(e)} setToken={setToken}/>,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520130726.tsx b/.history/components/admin/pages/login/Index_20220520130726.tsx
new file mode 100644
index 0000000..cad1924
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520130726.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import Entrance from './EnteringMail';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520130848.tsx b/.history/components/admin/pages/login/Index_20220520130848.tsx
new file mode 100644
index 0000000..048aaa6
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520130848.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import Entrance from './Entrance';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520130904.tsx b/.history/components/admin/pages/login/Index_20220520130904.tsx
new file mode 100644
index 0000000..4977be0
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520130904.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131056.tsx b/.history/components/admin/pages/login/Index_20220520131056.tsx
new file mode 100644
index 0000000..4977be0
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131056.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131131.tsx b/.history/components/admin/pages/login/Index_20220520131131.tsx
new file mode 100644
index 0000000..cb10175
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131131.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        <Entrance />
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131142.tsx b/.history/components/admin/pages/login/Index_20220520131142.tsx
new file mode 100644
index 0000000..81eabad
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131142.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131153.tsx b/.history/components/admin/pages/login/Index_20220520131153.tsx
new file mode 100644
index 0000000..6c1dfa1
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131153.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        <Entrance />
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131157.tsx b/.history/components/admin/pages/login/Index_20220520131157.tsx
new file mode 100644
index 0000000..db89862
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131157.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+     
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131241.tsx b/.history/components/admin/pages/login/Index_20220520131241.tsx
new file mode 100644
index 0000000..cb10175
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131241.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        <Entrance />
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Index_20220520131342.ts b/.history/components/admin/pages/login/Index_20220520131342.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/Index_20220520131353.ts b/.history/components/admin/pages/login/Index_20220520131353.ts
new file mode 100644
index 0000000..31f2618
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131353.ts
@@ -0,0 +1 @@
+export * from './Login'
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Index_20220520131422.ts b/.history/components/admin/pages/login/Index_20220520131422.ts
new file mode 100644
index 0000000..8518799
--- /dev/null
+++ b/.history/components/admin/pages/login/Index_20220520131422.ts
@@ -0,0 +1 @@
+export * from './Entrance'
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/Login_20220520131240.tsx b/.history/components/admin/pages/login/Login_20220520131240.tsx
new file mode 100644
index 0000000..cb10175
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220520131240.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        <Entrance />
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220520131246.tsx b/.history/components/admin/pages/login/Login_20220520131246.tsx
new file mode 100644
index 0000000..cb10175
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220520131246.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+   // const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        <Entrance />
+        {
+      //      { // updateData={(e) => updateData(e)} setToken={setToken}
+              //  0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+     //       }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220520131321.tsx b/.history/components/admin/pages/login/Login_20220520131321.tsx
new file mode 100644
index 0000000..4977be0
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220520131321.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Entrance } from './Entrance';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220520131413.tsx b/.history/components/admin/pages/login/Login_20220520131413.tsx
new file mode 100644
index 0000000..c526f4d
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220520131413.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Entrance } from './Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220520131426.tsx b/.history/components/admin/pages/login/Login_20220520131426.tsx
new file mode 100644
index 0000000..c526f4d
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220520131426.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Entrance } from './Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='root'>
+        <div className='main_login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220520132228.tsx b/.history/components/admin/pages/login/Login_20220520132228.tsx
new file mode 100644
index 0000000..8c70082
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220520132228.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Entrance } from './Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220522081224.tsx b/.history/components/admin/pages/login/Login_20220522081224.tsx
new file mode 100644
index 0000000..73c63a2
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220522081224.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Index';
+import { selectTokenData } from '../../../../redux/login/selectors';
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220522081235.tsx b/.history/components/admin/pages/login/Login_20220522081235.tsx
new file mode 100644
index 0000000..77d8730
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220522081235.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { Entrance } from './Index';
+import { selectTokenData } from '../../../../redux/login/selectors';
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    const { token, status_token } = useSelector(selectTokenData);
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220522081301.tsx b/.history/components/admin/pages/login/Login_20220522081301.tsx
new file mode 100644
index 0000000..dcfab35
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220522081301.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from './Index';
+import { selectTokenData } from '../../../../redux/login/selectors';
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    const { token, status_token } = useSelector(selectTokenData);
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220522081324.tsx b/.history/components/admin/pages/login/Login_20220522081324.tsx
new file mode 100644
index 0000000..3a23865
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220522081324.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from './Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+    const { token, status_token } = useSelector(selectTokenData);
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/Login_20220522081534.tsx b/.history/components/admin/pages/login/Login_20220522081534.tsx
new file mode 100644
index 0000000..90a8d00
--- /dev/null
+++ b/.history/components/admin/pages/login/Login_20220522081534.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from './Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/components/admin/pages/login/NewPassword_20220518152017.tsx b/.history/components/admin/pages/login/NewPassword_20220518152017.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/NewPassword_20220518152051.tsx b/.history/components/admin/pages/login/NewPassword_20220518152051.tsx
new file mode 100644
index 0000000..9b97d8c
--- /dev/null
+++ b/.history/components/admin/pages/login/NewPassword_20220518152051.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../component/Button';
+import Input from '../../component/Input';
+import Title from '../../component/Title';
+import Label from '../../component/Label';
+import postData from '../../function/postData';
+
+const NewPassword = (props) => {
+    const [_data, setData] = useState({email: props.email, password:'', passwordRepeat:''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+      }
+    const handleEntrance = () => {
+        console.log(_data);
+        if (_data.password === _data.passwordRepeat) {
+            postData('/api/newpassword', {_data})
+                .then((data) => {
+                    console.log(data[0]);
+                    data.token ? props.setToken(data) : setInformation(data.error);
+                   // setToken(data[0]);
+            });
+        } else {setInformation('Пароли не совпадают');}
+     }
+    return(
+        <>
+            <Title> Введите новый пароль </Title>
+            <Input label={'Новый пароль'} type={'password'} name={'password'} onChange={updateData} value={_data.password}/>
+            <Input label={'Повтор нового пароля'} type={'password'} name={'passwordRepeat'} onChange={updateData} value={_data.passwordRepeat}/>
+            <Button name={'Entrance'} onClick={handleEntrance}>Сохранить пароль</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+NewPassword.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default NewPassword;
\ No newline at end of file
diff --git a/.history/components/admin/pages/login/useToken_20220518152038.ts b/.history/components/admin/pages/login/useToken_20220518152038.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/admin/pages/login/useToken_20220518152044.ts b/.history/components/admin/pages/login/useToken_20220518152044.ts
new file mode 100644
index 0000000..3e9e4b6
--- /dev/null
+++ b/.history/components/admin/pages/login/useToken_20220518152044.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+
+export default function useToken() {
+  const [token, setToken] = useState('');
+  useEffect(() => setToken(localStorage.getItem("token")), []);
+  const saveToken = userToken => {
+    localStorage.setItem('token', JSON.stringify(userToken));
+    setToken(userToken?.token);
+  };
+
+  return {
+    setToken: saveToken,
+    token
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/Header_20220518151446.tsx b/.history/components/customer/Header_20220518151446.tsx
new file mode 100644
index 0000000..d150df2
--- /dev/null
+++ b/.history/components/customer/Header_20220518151446.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220518151805.tsx b/.history/components/customer/Header_20220518151805.tsx
new file mode 100644
index 0000000..8fc633d
--- /dev/null
+++ b/.history/components/customer/Header_20220518151805.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529152930.tsx b/.history/components/customer/Header_20220529152930.tsx
new file mode 100644
index 0000000..7ba5c2c
--- /dev/null
+++ b/.history/components/customer/Header_20220529152930.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/Header_20220529152932.tsx b/.history/components/customer/Header_20220529152932.tsx
new file mode 100644
index 0000000..7ba5c2c
--- /dev/null
+++ b/.history/components/customer/Header_20220529152932.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/Header_20220529152940.tsx b/.history/components/customer/Header_20220529152940.tsx
new file mode 100644
index 0000000..8fc633d
--- /dev/null
+++ b/.history/components/customer/Header_20220529152940.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153057.tsx b/.history/components/customer/Header_20220529153057.tsx
new file mode 100644
index 0000000..aad7a55
--- /dev/null
+++ b/.history/components/customer/Header_20220529153057.tsx
@@ -0,0 +1,84 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153101.tsx b/.history/components/customer/Header_20220529153101.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153101.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153311.tsx b/.history/components/customer/Header_20220529153311.tsx
new file mode 100644
index 0000000..fb4da92
--- /dev/null
+++ b/.history/components/customer/Header_20220529153311.tsx
@@ -0,0 +1,43 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153322.tsx b/.history/components/customer/Header_20220529153322.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153322.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153328.tsx b/.history/components/customer/Header_20220529153328.tsx
new file mode 100644
index 0000000..6031383
--- /dev/null
+++ b/.history/components/customer/Header_20220529153328.tsx
@@ -0,0 +1,49 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+     
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153335.tsx b/.history/components/customer/Header_20220529153335.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153335.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153339.tsx b/.history/components/customer/Header_20220529153339.tsx
new file mode 100644
index 0000000..fc3f1dc
--- /dev/null
+++ b/.history/components/customer/Header_20220529153339.tsx
@@ -0,0 +1,59 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153343.tsx b/.history/components/customer/Header_20220529153343.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153343.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153348.tsx b/.history/components/customer/Header_20220529153348.tsx
new file mode 100644
index 0000000..7754798
--- /dev/null
+++ b/.history/components/customer/Header_20220529153348.tsx
@@ -0,0 +1,72 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+     
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153350.tsx b/.history/components/customer/Header_20220529153350.tsx
new file mode 100644
index 0000000..5979edf
--- /dev/null
+++ b/.history/components/customer/Header_20220529153350.tsx
@@ -0,0 +1,72 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+     
+ 
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153400.tsx b/.history/components/customer/Header_20220529153400.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153400.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153657.tsx b/.history/components/customer/Header_20220529153657.tsx
new file mode 100644
index 0000000..5787331
--- /dev/null
+++ b/.history/components/customer/Header_20220529153657.tsx
@@ -0,0 +1,72 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153704.tsx b/.history/components/customer/Header_20220529153704.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153704.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153709.tsx b/.history/components/customer/Header_20220529153709.tsx
new file mode 100644
index 0000000..a1b4a6a
--- /dev/null
+++ b/.history/components/customer/Header_20220529153709.tsx
@@ -0,0 +1,71 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+     
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153715.tsx b/.history/components/customer/Header_20220529153715.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153715.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153717.tsx b/.history/components/customer/Header_20220529153717.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153717.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153759.tsx b/.history/components/customer/Header_20220529153759.tsx
new file mode 100644
index 0000000..5787331
--- /dev/null
+++ b/.history/components/customer/Header_20220529153759.tsx
@@ -0,0 +1,72 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153807.tsx b/.history/components/customer/Header_20220529153807.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153807.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529153808.tsx b/.history/components/customer/Header_20220529153808.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529153808.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155219.tsx b/.history/components/customer/Header_20220529155219.tsx
new file mode 100644
index 0000000..85dce73
--- /dev/null
+++ b/.history/components/customer/Header_20220529155219.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155228.tsx b/.history/components/customer/Header_20220529155228.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155228.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155230.tsx b/.history/components/customer/Header_20220529155230.tsx
new file mode 100644
index 0000000..c28b479
--- /dev/null
+++ b/.history/components/customer/Header_20220529155230.tsx
@@ -0,0 +1,80 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+       
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155231.tsx b/.history/components/customer/Header_20220529155231.tsx
new file mode 100644
index 0000000..c28b479
--- /dev/null
+++ b/.history/components/customer/Header_20220529155231.tsx
@@ -0,0 +1,80 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+       
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155237.tsx b/.history/components/customer/Header_20220529155237.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155237.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155241.tsx b/.history/components/customer/Header_20220529155241.tsx
new file mode 100644
index 0000000..067fbe1
--- /dev/null
+++ b/.history/components/customer/Header_20220529155241.tsx
@@ -0,0 +1,78 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+         
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155247.tsx b/.history/components/customer/Header_20220529155247.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155247.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155250.tsx b/.history/components/customer/Header_20220529155250.tsx
new file mode 100644
index 0000000..fc1688a
--- /dev/null
+++ b/.history/components/customer/Header_20220529155250.tsx
@@ -0,0 +1,76 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155251.tsx b/.history/components/customer/Header_20220529155251.tsx
new file mode 100644
index 0000000..fc1688a
--- /dev/null
+++ b/.history/components/customer/Header_20220529155251.tsx
@@ -0,0 +1,76 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155256.tsx b/.history/components/customer/Header_20220529155256.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155256.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155259.tsx b/.history/components/customer/Header_20220529155259.tsx
new file mode 100644
index 0000000..056414a
--- /dev/null
+++ b/.history/components/customer/Header_20220529155259.tsx
@@ -0,0 +1,75 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155306.tsx b/.history/components/customer/Header_20220529155306.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155306.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155311.tsx b/.history/components/customer/Header_20220529155311.tsx
new file mode 100644
index 0000000..8b0145a
--- /dev/null
+++ b/.history/components/customer/Header_20220529155311.tsx
@@ -0,0 +1,73 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+       
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155315.tsx b/.history/components/customer/Header_20220529155315.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155315.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155319.tsx b/.history/components/customer/Header_20220529155319.tsx
new file mode 100644
index 0000000..dfd19ca
--- /dev/null
+++ b/.history/components/customer/Header_20220529155319.tsx
@@ -0,0 +1,74 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155321.tsx b/.history/components/customer/Header_20220529155321.tsx
new file mode 100644
index 0000000..6585821
--- /dev/null
+++ b/.history/components/customer/Header_20220529155321.tsx
@@ -0,0 +1,64 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        
+      </div>
+      <div className={classNames('block entrance')} >
+       
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155329.tsx b/.history/components/customer/Header_20220529155329.tsx
new file mode 100644
index 0000000..343df0c
--- /dev/null
+++ b/.history/components/customer/Header_20220529155329.tsx
@@ -0,0 +1,57 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+       
+      </div>
+      <div className={classNames('block basket')} >
+        
+      </div>
+      <div className={classNames('block entrance')} >
+       
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155335.tsx b/.history/components/customer/Header_20220529155335.tsx
new file mode 100644
index 0000000..1837e7f
--- /dev/null
+++ b/.history/components/customer/Header_20220529155335.tsx
@@ -0,0 +1,54 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+       
+      </div>
+      <div className={classNames('block telephone')} >
+       
+      </div>
+      <div className={classNames('block basket')} >
+        
+      </div>
+      <div className={classNames('block entrance')} >
+       
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155341.tsx b/.history/components/customer/Header_20220529155341.tsx
new file mode 100644
index 0000000..646dc3c
--- /dev/null
+++ b/.history/components/customer/Header_20220529155341.tsx
@@ -0,0 +1,52 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+       
+      </div>
+      <div className={classNames('block telephone')} >
+       
+      </div>
+      <div className={classNames('block basket')} >
+        
+      </div>
+  
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155346.tsx b/.history/components/customer/Header_20220529155346.tsx
new file mode 100644
index 0000000..132e498
--- /dev/null
+++ b/.history/components/customer/Header_20220529155346.tsx
@@ -0,0 +1,50 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+       
+      </div>
+      <div className={classNames('block telephone')} >
+       
+      </div>
+  
+  
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155352.tsx b/.history/components/customer/Header_20220529155352.tsx
new file mode 100644
index 0000000..16c00be
--- /dev/null
+++ b/.history/components/customer/Header_20220529155352.tsx
@@ -0,0 +1,48 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+       
+      </div>
+ 
+  
+  
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155403.tsx b/.history/components/customer/Header_20220529155403.tsx
new file mode 100644
index 0000000..1db3d12
--- /dev/null
+++ b/.history/components/customer/Header_20220529155403.tsx
@@ -0,0 +1,46 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+  
+ 
+  
+  
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155409.tsx b/.history/components/customer/Header_20220529155409.tsx
new file mode 100644
index 0000000..28976be
--- /dev/null
+++ b/.history/components/customer/Header_20220529155409.tsx
@@ -0,0 +1,44 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+   
+  
+ 
+  
+  
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155423.tsx b/.history/components/customer/Header_20220529155423.tsx
new file mode 100644
index 0000000..338dbf9
--- /dev/null
+++ b/.history/components/customer/Header_20220529155423.tsx
@@ -0,0 +1,84 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} 
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155424.tsx b/.history/components/customer/Header_20220529155424.tsx
new file mode 100644
index 0000000..aad7a55
--- /dev/null
+++ b/.history/components/customer/Header_20220529155424.tsx
@@ -0,0 +1,84 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155427.tsx b/.history/components/customer/Header_20220529155427.tsx
new file mode 100644
index 0000000..8dc6277
--- /dev/null
+++ b/.history/components/customer/Header_20220529155427.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon 
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155432.tsx b/.history/components/customer/Header_20220529155432.tsx
new file mode 100644
index 0000000..aad7a55
--- /dev/null
+++ b/.history/components/customer/Header_20220529155432.tsx
@@ -0,0 +1,84 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155436.tsx b/.history/components/customer/Header_20220529155436.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155436.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155443.tsx b/.history/components/customer/Header_20220529155443.tsx
new file mode 100644
index 0000000..fb449bf
--- /dev/null
+++ b/.history/components/customer/Header_20220529155443.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </в>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155445.tsx b/.history/components/customer/Header_20220529155445.tsx
new file mode 100644
index 0000000..fb449bf
--- /dev/null
+++ b/.history/components/customer/Header_20220529155445.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </в>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155451.tsx b/.history/components/customer/Header_20220529155451.tsx
new file mode 100644
index 0000000..b06f514
--- /dev/null
+++ b/.history/components/customer/Header_20220529155451.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155625.tsx b/.history/components/customer/Header_20220529155625.tsx
new file mode 100644
index 0000000..1694ff0
--- /dev/null
+++ b/.history/components/customer/Header_20220529155625.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div className='header'>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155651.tsx b/.history/components/customer/Header_20220529155651.tsx
new file mode 100644
index 0000000..b06f514
--- /dev/null
+++ b/.history/components/customer/Header_20220529155651.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <div>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155657.tsx b/.history/components/customer/Header_20220529155657.tsx
new file mode 100644
index 0000000..d9a432b
--- /dev/null
+++ b/.history/components/customer/Header_20220529155657.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <head>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </head>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155705.tsx b/.history/components/customer/Header_20220529155705.tsx
new file mode 100644
index 0000000..40ab38d
--- /dev/null
+++ b/.history/components/customer/Header_20220529155705.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <hea>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </hea>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155714.tsx b/.history/components/customer/Header_20220529155714.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155714.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155854.tsx b/.history/components/customer/Header_20220529155854.tsx
new file mode 100644
index 0000000..ab10f2b
--- /dev/null
+++ b/.history/components/customer/Header_20220529155854.tsx
@@ -0,0 +1,81 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+     
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155900.tsx b/.history/components/customer/Header_20220529155900.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155900.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155903.tsx b/.history/components/customer/Header_20220529155903.tsx
new file mode 100644
index 0000000..25e9e4e
--- /dev/null
+++ b/.history/components/customer/Header_20220529155903.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529155910.tsx b/.history/components/customer/Header_20220529155910.tsx
new file mode 100644
index 0000000..d3d78d7
--- /dev/null
+++ b/.history/components/customer/Header_20220529155910.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160110.tsx b/.history/components/customer/Header_20220529160110.tsx
new file mode 100644
index 0000000..89ac3d5
--- /dev/null
+++ b/.history/components/customer/Header_20220529160110.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p></p>Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160112.tsx b/.history/components/customer/Header_20220529160112.tsx
new file mode 100644
index 0000000..9bcd673
--- /dev/null
+++ b/.history/components/customer/Header_20220529160112.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160624.tsx b/.history/components/customer/Header_20220529160624.tsx
new file mode 100644
index 0000000..12ee0d4
--- /dev/null
+++ b/.history/components/customer/Header_20220529160624.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+           
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160630.tsx b/.history/components/customer/Header_20220529160630.tsx
new file mode 100644
index 0000000..9bcd673
--- /dev/null
+++ b/.history/components/customer/Header_20220529160630.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160632.tsx b/.history/components/customer/Header_20220529160632.tsx
new file mode 100644
index 0000000..12ee0d4
--- /dev/null
+++ b/.history/components/customer/Header_20220529160632.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+           
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160642.tsx b/.history/components/customer/Header_20220529160642.tsx
new file mode 100644
index 0000000..19a88fa
--- /dev/null
+++ b/.history/components/customer/Header_20220529160642.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+    
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+           
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160646.tsx b/.history/components/customer/Header_20220529160646.tsx
new file mode 100644
index 0000000..f7a4212
--- /dev/null
+++ b/.history/components/customer/Header_20220529160646.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+        
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+    
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+           
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160653.tsx b/.history/components/customer/Header_20220529160653.tsx
new file mode 100644
index 0000000..5de977c
--- /dev/null
+++ b/.history/components/customer/Header_20220529160653.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+        
+            <br></br>
+        
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+    
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+           
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160659.tsx b/.history/components/customer/Header_20220529160659.tsx
new file mode 100644
index 0000000..a5d8856
--- /dev/null
+++ b/.history/components/customer/Header_20220529160659.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+        
+       
+        
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+    
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+           
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160718.tsx b/.history/components/customer/Header_20220529160718.tsx
new file mode 100644
index 0000000..9bcd673
--- /dev/null
+++ b/.history/components/customer/Header_20220529160718.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160720.tsx b/.history/components/customer/Header_20220529160720.tsx
new file mode 100644
index 0000000..bb1ed9a
--- /dev/null
+++ b/.history/components/customer/Header_20220529160720.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p></p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160723.tsx b/.history/components/customer/Header_20220529160723.tsx
new file mode 100644
index 0000000..89ac3d5
--- /dev/null
+++ b/.history/components/customer/Header_20220529160723.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p></p>Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160724.tsx b/.history/components/customer/Header_20220529160724.tsx
new file mode 100644
index 0000000..bb1ed9a
--- /dev/null
+++ b/.history/components/customer/Header_20220529160724.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p></p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160725.tsx b/.history/components/customer/Header_20220529160725.tsx
new file mode 100644
index 0000000..9bcd673
--- /dev/null
+++ b/.history/components/customer/Header_20220529160725.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160852.tsx b/.history/components/customer/Header_20220529160852.tsx
new file mode 100644
index 0000000..ec41a31
--- /dev/null
+++ b/.history/components/customer/Header_20220529160852.tsx
@@ -0,0 +1,84 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+              if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160855.tsx b/.history/components/customer/Header_20220529160855.tsx
new file mode 100644
index 0000000..def55b7
--- /dev/null
+++ b/.history/components/customer/Header_20220529160855.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+              if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+            Ъ
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160858.tsx b/.history/components/customer/Header_20220529160858.tsx
new file mode 100644
index 0000000..9dd7a30
--- /dev/null
+++ b/.history/components/customer/Header_20220529160858.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+              if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160900.tsx b/.history/components/customer/Header_20220529160900.tsx
new file mode 100644
index 0000000..050986f
--- /dev/null
+++ b/.history/components/customer/Header_20220529160900.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+           {}   if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160901.tsx b/.history/components/customer/Header_20220529160901.tsx
new file mode 100644
index 0000000..ada249a
--- /dev/null
+++ b/.history/components/customer/Header_20220529160901.tsx
@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+           {   if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160903.tsx b/.history/components/customer/Header_20220529160903.tsx
new file mode 100644
index 0000000..5c46bfa
--- /dev/null
+++ b/.history/components/customer/Header_20220529160903.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+           {   if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160906.tsx b/.history/components/customer/Header_20220529160906.tsx
new file mode 100644
index 0000000..a7b8a93
--- /dev/null
+++ b/.history/components/customer/Header_20220529160906.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+           {  if(window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160908.tsx b/.history/components/customer/Header_20220529160908.tsx
new file mode 100644
index 0000000..bb1e874
--- /dev/null
+++ b/.history/components/customer/Header_20220529160908.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+           { window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160909.tsx b/.history/components/customer/Header_20220529160909.tsx
new file mode 100644
index 0000000..ead2f98
--- /dev/null
+++ b/.history/components/customer/Header_20220529160909.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth < 800) {
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160914.tsx b/.history/components/customer/Header_20220529160914.tsx
new file mode 100644
index 0000000..b3870ab
--- /dev/null
+++ b/.history/components/customer/Header_20220529160914.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth < 800 
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160916.tsx b/.history/components/customer/Header_20220529160916.tsx
new file mode 100644
index 0000000..6a46f98
--- /dev/null
+++ b/.history/components/customer/Header_20220529160916.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth < 800 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160917.tsx b/.history/components/customer/Header_20220529160917.tsx
new file mode 100644
index 0000000..2c0a78f
--- /dev/null
+++ b/.history/components/customer/Header_20220529160917.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth < 800 ? 
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              }
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160920.tsx b/.history/components/customer/Header_20220529160920.tsx
new file mode 100644
index 0000000..1a749aa
--- /dev/null
+++ b/.history/components/customer/Header_20220529160920.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth < 800 ? 
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160923.tsx b/.history/components/customer/Header_20220529160923.tsx
new file mode 100644
index 0000000..dd2bcfc
--- /dev/null
+++ b/.history/components/customer/Header_20220529160923.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth < 800 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160931.tsx b/.history/components/customer/Header_20220529160931.tsx
new file mode 100644
index 0000000..7d0a923
--- /dev/null
+++ b/.history/components/customer/Header_20220529160931.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 800 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529160934.tsx b/.history/components/customer/Header_20220529160934.tsx
new file mode 100644
index 0000000..2f7260b
--- /dev/null
+++ b/.history/components/customer/Header_20220529160934.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 640 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161109.tsx b/.history/components/customer/Header_20220529161109.tsx
new file mode 100644
index 0000000..df5cfd4
--- /dev/null
+++ b/.history/components/customer/Header_20220529161109.tsx
@@ -0,0 +1,94 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 640 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161125.tsx b/.history/components/customer/Header_20220529161125.tsx
new file mode 100644
index 0000000..6b48f00
--- /dev/null
+++ b/.history/components/customer/Header_20220529161125.tsx
@@ -0,0 +1,95 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 640 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161127.tsx b/.history/components/customer/Header_20220529161127.tsx
new file mode 100644
index 0000000..ab3ddd7
--- /dev/null
+++ b/.history/components/customer/Header_20220529161127.tsx
@@ -0,0 +1,107 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 640 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161142.tsx b/.history/components/customer/Header_20220529161142.tsx
new file mode 100644
index 0000000..5db4211
--- /dev/null
+++ b/.history/components/customer/Header_20220529161142.tsx
@@ -0,0 +1,107 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+con
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 640 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161147.tsx b/.history/components/customer/Header_20220529161147.tsx
new file mode 100644
index 0000000..2e8fe34
--- /dev/null
+++ b/.history/components/customer/Header_20220529161147.tsx
@@ -0,0 +1,107 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+console.log(windowDimensions);
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            { window.innerWidth > 640 ?
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161203.tsx b/.history/components/customer/Header_20220529161203.tsx
new file mode 100644
index 0000000..1952c0e
--- /dev/null
+++ b/.history/components/customer/Header_20220529161203.tsx
@@ -0,0 +1,107 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+console.log(windowDimensions);
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            
+            <p className={classNames('link entrance_link')}>Корзина</p>
+              : ''
+            }
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161210.tsx b/.history/components/customer/Header_20220529161210.tsx
new file mode 100644
index 0000000..29b619d
--- /dev/null
+++ b/.history/components/customer/Header_20220529161210.tsx
@@ -0,0 +1,104 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+console.log(windowDimensions);
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161333.tsx b/.history/components/customer/Header_20220529161333.tsx
new file mode 100644
index 0000000..e718dcb
--- /dev/null
+++ b/.history/components/customer/Header_20220529161333.tsx
@@ -0,0 +1,97 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+console.log(windowDimensions);
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161339.tsx b/.history/components/customer/Header_20220529161339.tsx
new file mode 100644
index 0000000..6f45d3c
--- /dev/null
+++ b/.history/components/customer/Header_20220529161339.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161341.tsx b/.history/components/customer/Header_20220529161341.tsx
new file mode 100644
index 0000000..6f45d3c
--- /dev/null
+++ b/.history/components/customer/Header_20220529161341.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161431.tsx b/.history/components/customer/Header_20220529161431.tsx
new file mode 100644
index 0000000..503a070
--- /dev/null
+++ b/.history/components/customer/Header_20220529161431.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161434.tsx b/.history/components/customer/Header_20220529161434.tsx
new file mode 100644
index 0000000..782049b
--- /dev/null
+++ b/.history/components/customer/Header_20220529161434.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161436.tsx b/.history/components/customer/Header_20220529161436.tsx
new file mode 100644
index 0000000..d63f56a
--- /dev/null
+++ b/.history/components/customer/Header_20220529161436.tsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161440.tsx b/.history/components/customer/Header_20220529161440.tsx
new file mode 100644
index 0000000..a6c93e0
--- /dev/null
+++ b/.history/components/customer/Header_20220529161440.tsx
@@ -0,0 +1,88 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161443.tsx b/.history/components/customer/Header_20220529161443.tsx
new file mode 100644
index 0000000..13f40f5
--- /dev/null
+++ b/.history/components/customer/Header_20220529161443.tsx
@@ -0,0 +1,88 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161447.tsx b/.history/components/customer/Header_20220529161447.tsx
new file mode 100644
index 0000000..2b991cc
--- /dev/null
+++ b/.history/components/customer/Header_20220529161447.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  con
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161450.tsx b/.history/components/customer/Header_20220529161450.tsx
new file mode 100644
index 0000000..7537893
--- /dev/null
+++ b/.history/components/customer/Header_20220529161450.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  console.log();
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161454.tsx b/.history/components/customer/Header_20220529161454.tsx
new file mode 100644
index 0000000..f0b9818
--- /dev/null
+++ b/.history/components/customer/Header_20220529161454.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  console.log(pageWidth);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161500.tsx b/.history/components/customer/Header_20220529161500.tsx
new file mode 100644
index 0000000..9cfc51e
--- /dev/null
+++ b/.history/components/customer/Header_20220529161500.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161502.tsx b/.history/components/customer/Header_20220529161502.tsx
new file mode 100644
index 0000000..7250a93
--- /dev/null
+++ b/.history/components/customer/Header_20220529161502.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth);
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161512.tsx b/.history/components/customer/Header_20220529161512.tsx
new file mode 100644
index 0000000..a252458
--- /dev/null
+++ b/.history/components/customer/Header_20220529161512.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth);
+    console.log(pageWidth);
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161516.tsx b/.history/components/customer/Header_20220529161516.tsx
new file mode 100644
index 0000000..3221fa4
--- /dev/null
+++ b/.history/components/customer/Header_20220529161516.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth);
+    console.log(pageHeight);
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161519.tsx b/.history/components/customer/Header_20220529161519.tsx
new file mode 100644
index 0000000..4fc325d
--- /dev/null
+++ b/.history/components/customer/Header_20220529161519.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth);
+    console.log(pageHeight, );
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161521.tsx b/.history/components/customer/Header_20220529161521.tsx
new file mode 100644
index 0000000..1f423f8
--- /dev/null
+++ b/.history/components/customer/Header_20220529161521.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth);
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161532.tsx b/.history/components/customer/Header_20220529161532.tsx
new file mode 100644
index 0000000..bdf6cd7
--- /dev/null
+++ b/.history/components/customer/Header_20220529161532.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, pageWidth);
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161537.tsx b/.history/components/customer/Header_20220529161537.tsx
new file mode 100644
index 0000000..7ef5e12
--- /dev/null
+++ b/.history/components/customer/Header_20220529161537.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161539.tsx b/.history/components/customer/Header_20220529161539.tsx
new file mode 100644
index 0000000..4d75096
--- /dev/null
+++ b/.history/components/customer/Header_20220529161539.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.scrollWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161645.tsx b/.history/components/customer/Header_20220529161645.tsx
new file mode 100644
index 0000000..2dd6d91
--- /dev/null
+++ b/.history/components/customer/Header_20220529161645.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement. window.outerWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161648.tsx b/.history/components/customer/Header_20220529161648.tsx
new file mode 100644
index 0000000..8f15acf
--- /dev/null
+++ b/.history/components/customer/Header_20220529161648.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.outerWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161706.tsx b/.history/components/customer/Header_20220529161706.tsx
new file mode 100644
index 0000000..f253428
--- /dev/null
+++ b/.history/components/customer/Header_20220529161706.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220529161714.tsx b/.history/components/customer/Header_20220529161714.tsx
new file mode 100644
index 0000000..0310304
--- /dev/null
+++ b/.history/components/customer/Header_20220529161714.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165226.tsx b/.history/components/customer/Header_20220530165226.tsx
new file mode 100644
index 0000000..d9c10c1
--- /dev/null
+++ b/.history/components/customer/Header_20220530165226.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+          
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165229.tsx b/.history/components/customer/Header_20220530165229.tsx
new file mode 100644
index 0000000..2dde355
--- /dev/null
+++ b/.history/components/customer/Header_20220530165229.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+          
+            <br></br>
+     
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165233.tsx b/.history/components/customer/Header_20220530165233.tsx
new file mode 100644
index 0000000..8aa5349
--- /dev/null
+++ b/.history/components/customer/Header_20220530165233.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+          
+            <br></br>
+     
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+  
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165236.tsx b/.history/components/customer/Header_20220530165236.tsx
new file mode 100644
index 0000000..e595d10
--- /dev/null
+++ b/.history/components/customer/Header_20220530165236.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+          
+            <br></br>
+     
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+  
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165237.tsx b/.history/components/customer/Header_20220530165237.tsx
new file mode 100644
index 0000000..e595d10
--- /dev/null
+++ b/.history/components/customer/Header_20220530165237.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+          
+            <br></br>
+     
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+  
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165443.tsx b/.history/components/customer/Header_20220530165443.tsx
new file mode 100644
index 0000000..0310304
--- /dev/null
+++ b/.history/components/customer/Header_20220530165443.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.clientHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165447.tsx b/.history/components/customer/Header_20220530165447.tsx
new file mode 100644
index 0000000..f253428
--- /dev/null
+++ b/.history/components/customer/Header_20220530165447.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+    const pageWidth = document.documentElement.clientWidth
+    const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+    console.log(pageWidth, 'pageWidth');
+    console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165455.tsx b/.history/components/customer/Header_20220530165455.tsx
new file mode 100644
index 0000000..56ea99c
--- /dev/null
+++ b/.history/components/customer/Header_20220530165455.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165511.tsx b/.history/components/customer/Header_20220530165511.tsx
new file mode 100644
index 0000000..69cdea7
--- /dev/null
+++ b/.history/components/customer/Header_20220530165511.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165514.tsx b/.history/components/customer/Header_20220530165514.tsx
new file mode 100644
index 0000000..5681907
--- /dev/null
+++ b/.history/components/customer/Header_20220530165514.tsx
@@ -0,0 +1,92 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165521.tsx b/.history/components/customer/Header_20220530165521.tsx
new file mode 100644
index 0000000..2f7b56b
--- /dev/null
+++ b/.history/components/customer/Header_20220530165521.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165524.tsx b/.history/components/customer/Header_20220530165524.tsx
new file mode 100644
index 0000000..6979ed8
--- /dev/null
+++ b/.history/components/customer/Header_20220530165524.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530165529.tsx b/.history/components/customer/Header_20220530165529.tsx
new file mode 100644
index 0000000..6979ed8
--- /dev/null
+++ b/.history/components/customer/Header_20220530165529.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175306.tsx b/.history/components/customer/Header_20220530175306.tsx
new file mode 100644
index 0000000..a5d3f90
--- /dev/null
+++ b/.history/components/customer/Header_20220530175306.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+          
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175315.tsx b/.history/components/customer/Header_20220530175315.tsx
new file mode 100644
index 0000000..40e81ff
--- /dev/null
+++ b/.history/components/customer/Header_20220530175315.tsx
@@ -0,0 +1,88 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+          
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175916.tsx b/.history/components/customer/Header_20220530175916.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530175916.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175929.tsx b/.history/components/customer/Header_20220530175929.tsx
new file mode 100644
index 0000000..a123c99
--- /dev/null
+++ b/.history/components/customer/Header_20220530175929.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175933.tsx b/.history/components/customer/Header_20220530175933.tsx
new file mode 100644
index 0000000..5b7d388
--- /dev/null
+++ b/.history/components/customer/Header_20220530175933.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames(' entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175935.tsx b/.history/components/customer/Header_20220530175935.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530175935.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175936.tsx b/.history/components/customer/Header_20220530175936.tsx
new file mode 100644
index 0000000..288fa86
--- /dev/null
+++ b/.history/components/customer/Header_20220530175936.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175948.tsx b/.history/components/customer/Header_20220530175948.tsx
new file mode 100644
index 0000000..dd9d29f
--- /dev/null
+++ b/.history/components/customer/Header_20220530175948.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175953.tsx b/.history/components/customer/Header_20220530175953.tsx
new file mode 100644
index 0000000..2730b25
--- /dev/null
+++ b/.history/components/customer/Header_20220530175953.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p >Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530175958.tsx b/.history/components/customer/Header_20220530175958.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530175958.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180000.tsx b/.history/components/customer/Header_20220530180000.tsx
new file mode 100644
index 0000000..6f471f8
--- /dev/null
+++ b/.history/components/customer/Header_20220530180000.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block ')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180002.tsx b/.history/components/customer/Header_20220530180002.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530180002.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180003.tsx b/.history/components/customer/Header_20220530180003.tsx
new file mode 100644
index 0000000..6a9efaf
--- /dev/null
+++ b/.history/components/customer/Header_20220530180003.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames(' basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180005.tsx b/.history/components/customer/Header_20220530180005.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530180005.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180008.tsx b/.history/components/customer/Header_20220530180008.tsx
new file mode 100644
index 0000000..b120db6
--- /dev/null
+++ b/.history/components/customer/Header_20220530180008.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={''}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180010.tsx b/.history/components/customer/Header_20220530180010.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530180010.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180106.tsx b/.history/components/customer/Header_20220530180106.tsx
new file mode 100644
index 0000000..9439306
--- /dev/null
+++ b/.history/components/customer/Header_20220530180106.tsx
@@ -0,0 +1,83 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+           
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180109.tsx b/.history/components/customer/Header_20220530180109.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530180109.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180112.tsx b/.history/components/customer/Header_20220530180112.tsx
new file mode 100644
index 0000000..2898ea6
--- /dev/null
+++ b/.history/components/customer/Header_20220530180112.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180114.tsx b/.history/components/customer/Header_20220530180114.tsx
new file mode 100644
index 0000000..54a4d37
--- /dev/null
+++ b/.history/components/customer/Header_20220530180114.tsx
@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180224.tsx b/.history/components/customer/Header_20220530180224.tsx
new file mode 100644
index 0000000..1ebf788
--- /dev/null
+++ b/.history/components/customer/Header_20220530180224.tsx
@@ -0,0 +1,88 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+        <a href="admin">
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180226.tsx b/.history/components/customer/Header_20220530180226.tsx
new file mode 100644
index 0000000..f15aac9
--- /dev/null
+++ b/.history/components/customer/Header_20220530180226.tsx
@@ -0,0 +1,88 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180228.tsx b/.history/components/customer/Header_20220530180228.tsx
new file mode 100644
index 0000000..1ea1808
--- /dev/null
+++ b/.history/components/customer/Header_20220530180228.tsx
@@ -0,0 +1,88 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>Корзина</p>
+            </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180229.tsx b/.history/components/customer/Header_20220530180229.tsx
new file mode 100644
index 0000000..4887b43
--- /dev/null
+++ b/.history/components/customer/Header_20220530180229.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>Корзина</p>
+            </i>
+            
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180231.tsx b/.history/components/customer/Header_20220530180231.tsx
new file mode 100644
index 0000000..f54327a
--- /dev/null
+++ b/.history/components/customer/Header_20220530180231.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>Корзина</p>
+            </i>
+            </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180234.tsx b/.history/components/customer/Header_20220530180234.tsx
new file mode 100644
index 0000000..9c8cc23
--- /dev/null
+++ b/.history/components/customer/Header_20220530180234.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>Корзина</p>
+            </i>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180244.tsx b/.history/components/customer/Header_20220530180244.tsx
new file mode 100644
index 0000000..4eb61ad
--- /dev/null
+++ b/.history/components/customer/Header_20220530180244.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>K</p>
+            </i>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180245.tsx b/.history/components/customer/Header_20220530180245.tsx
new file mode 100644
index 0000000..20c1bed
--- /dev/null
+++ b/.history/components/customer/Header_20220530180245.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>Ker</p>
+            </i>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180248.tsx b/.history/components/customer/Header_20220530180248.tsx
new file mode 100644
index 0000000..4eb61ad
--- /dev/null
+++ b/.history/components/customer/Header_20220530180248.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>K</p>
+            </i>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530180249.tsx b/.history/components/customer/Header_20220530180249.tsx
new file mode 100644
index 0000000..9c8cc23
--- /dev/null
+++ b/.history/components/customer/Header_20220530180249.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              <p className={classNames('link entrance_link')}>Корзина</p>
+            </i>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182258.tsx b/.history/components/customer/Header_20220530182258.tsx
new file mode 100644
index 0000000..f54e98e
--- /dev/null
+++ b/.history/components/customer/Header_20220530182258.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+            
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182300.tsx b/.history/components/customer/Header_20220530182300.tsx
new file mode 100644
index 0000000..04ad2dd
--- /dev/null
+++ b/.history/components/customer/Header_20220530182300.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+        
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182302.tsx b/.history/components/customer/Header_20220530182302.tsx
new file mode 100644
index 0000000..9c6c857
--- /dev/null
+++ b/.history/components/customer/Header_20220530182302.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182724.tsx b/.history/components/customer/Header_20220530182724.tsx
new file mode 100644
index 0000000..0181c8c
--- /dev/null
+++ b/.history/components/customer/Header_20220530182724.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link "}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182729.tsx b/.history/components/customer/Header_20220530182729.tsx
new file mode 100644
index 0000000..338a9f6
--- /dev/null
+++ b/.history/components/customer/Header_20220530182729.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link ka"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182732.tsx b/.history/components/customer/Header_20220530182732.tsx
new file mode 100644
index 0000000..cfd554f
--- /dev/null
+++ b/.history/components/customer/Header_20220530182732.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530182733.tsx b/.history/components/customer/Header_20220530182733.tsx
new file mode 100644
index 0000000..cfd554f
--- /dev/null
+++ b/.history/components/customer/Header_20220530182733.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530183415.tsx b/.history/components/customer/Header_20220530183415.tsx
new file mode 100644
index 0000000..dd04200
--- /dev/null
+++ b/.history/components/customer/Header_20220530183415.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530183817.tsx b/.history/components/customer/Header_20220530183817.tsx
new file mode 100644
index 0000000..6a4cb5c
--- /dev/null
+++ b/.history/components/customer/Header_20220530183817.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} c/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530183822.tsx b/.history/components/customer/Header_20220530183822.tsx
new file mode 100644
index 0000000..0cfa7a5
--- /dev/null
+++ b/.history/components/customer/Header_20220530183822.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Header_20220530183823.tsx b/.history/components/customer/Header_20220530183823.tsx
new file mode 100644
index 0000000..0cfa7a5
--- /dev/null
+++ b/.history/components/customer/Header_20220530183823.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/Pages/Index/block/Description/Description_20220530190937.tsx b/.history/components/customer/Pages/Index/block/Description/Description_20220530190937.tsx
new file mode 100644
index 0000000..97edca8
--- /dev/null
+++ b/.history/components/customer/Pages/Index/block/Description/Description_20220530190937.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/img/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/assets/img/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/Pages/Index/block/Description/Description_20220531162101.tsx b/.history/components/customer/Pages/Index/block/Description/Description_20220531162101.tsx
new file mode 100644
index 0000000..d933201
--- /dev/null
+++ b/.history/components/customer/Pages/Index/block/Description/Description_20220531162101.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../../../containers'
+import { PictureText } from '../../../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/img/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/assets/img/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/Pages/Index/block/Pizza/Pizza_20220529151345.tsx b/.history/components/customer/Pages/Index/block/Pizza/Pizza_20220529151345.tsx
new file mode 100644
index 0000000..dfe53cb
--- /dev/null
+++ b/.history/components/customer/Pages/Index/block/Pizza/Pizza_20220529151345.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/Pages/Index/block/Pizza/Pizza_20220531162101.tsx b/.history/components/customer/Pages/Index/block/Pizza/Pizza_20220531162101.tsx
new file mode 100644
index 0000000..0bb4113
--- /dev/null
+++ b/.history/components/customer/Pages/Index/block/Pizza/Pizza_20220531162101.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Categories/Categories_20220528175029.tsx b/.history/components/customer/block/Categories/Categories_20220528175029.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Categories/Categories_20220528175234.tsx b/.history/components/customer/block/Categories/Categories_20220528175234.tsx
new file mode 100644
index 0000000..001a1b4
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528175234.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    id: number;
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const Stock: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <div className={classNames('card_stock', color)}>
+            <div className={'title_box'}>
+                <p className={'title'}>{title_one}</p>
+                <p className={'title'}>{title_two}</p>
+            </div>
+            <div className = {classNames('img', img)}/>
+            <div className={'sale_box'}>
+                <p>{sale}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528175311.tsx b/.history/components/customer/block/Categories/Categories_20220528175311.tsx
new file mode 100644
index 0000000..cf0608c
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528175311.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    id: number;
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CategoriesCard: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+          export const CategoriesCard: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528175856.tsx b/.history/components/customer/block/Categories/Categories_20220528175856.tsx
new file mode 100644
index 0000000..4bc6ccb
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528175856.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    id: number;
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CategoriesCard: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <a
+            href={"#"+num}
+            className={'button ' + ' ' + ' melon'}
+            id={num}>{rows.name}</a>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528224149.tsx b/.history/components/customer/block/Categories/Categories_20220528224149.tsx
new file mode 100644
index 0000000..7f8fc42
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528224149.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    title: string;
+  };
+
+  export const CategoriesCard: React.FC<Props> = ({type, title}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={'button ' + ' ' + ' melon'}
+            id={type}>{title}</a>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528224224.tsx b/.history/components/customer/block/Categories/Categories_20220528224224.tsx
new file mode 100644
index 0000000..055350b
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528224224.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    title: string;
+  };
+
+  export const CategoriesCard: React.FC<Props> = ({type, title}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon')}
+            id={type}>{title}</a>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528224233.tsx b/.history/components/customer/block/Categories/Categories_20220528224233.tsx
new file mode 100644
index 0000000..9f19a2a
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528224233.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    title: string;
+  };
+
+  export const CategoriesCard: React.FC<Props> = ({type, title}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon')}
+            id={type}>{title}
+        </a>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528224355.tsx b/.history/components/customer/block/Categories/Categories_20220528224355.tsx
new file mode 100644
index 0000000..9c78026
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528224355.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    title: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, title}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon')}
+            id={type}>{title}
+        </a>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Categories_20220528230021.tsx b/.history/components/customer/block/Categories/Categories_20220528230021.tsx
new file mode 100644
index 0000000..736cbdd
--- /dev/null
+++ b/.history/components/customer/block/Categories/Categories_20220528230021.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon')}
+            id={type}>{name}
+        </a>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528175037.tsx b/.history/components/customer/block/Categories/Skeleton_20220528175037.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528175118.tsx b/.history/components/customer/block/Categories/Skeleton_20220528175118.tsx
new file mode 100644
index 0000000..ab9517c
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528175118.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528234710.tsx b/.history/components/customer/block/Categories/Skeleton_20220528234710.tsx
new file mode 100644
index 0000000..58659e9
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528234710.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={120}
+    height={245}
+    viewBox="0 0 245 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528234713.tsx b/.history/components/customer/block/Categories/Skeleton_20220528234713.tsx
new file mode 100644
index 0000000..a7dd184
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528234713.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 245 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528234717.tsx b/.history/components/customer/block/Categories/Skeleton_20220528234717.tsx
new file mode 100644
index 0000000..c3aa778
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528234717.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 120 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528234719.tsx b/.history/components/customer/block/Categories/Skeleton_20220528234719.tsx
new file mode 100644
index 0000000..df1b9b3
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528234719.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 120 50"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528234723.tsx b/.history/components/customer/block/Categories/Skeleton_20220528234723.tsx
new file mode 100644
index 0000000..b51436c
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528234723.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 120 50"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="120" height="245" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528234725.tsx b/.history/components/customer/block/Categories/Skeleton_20220528234725.tsx
new file mode 100644
index 0000000..ce479bf
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528234725.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 120 50"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="120" height="120" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/Skeleton_20220528235052.tsx b/.history/components/customer/block/Categories/Skeleton_20220528235052.tsx
new file mode 100644
index 0000000..5ec378b
--- /dev/null
+++ b/.history/components/customer/block/Categories/Skeleton_20220528235052.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='categories_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 120 50"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="120" height="120" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Categories/index_20220530190145.ts b/.history/components/customer/block/Categories/index_20220530190145.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Categories/index_20220530190154.ts b/.history/components/customer/block/Categories/index_20220530190154.ts
new file mode 100644
index 0000000..aa52c18
--- /dev/null
+++ b/.history/components/customer/block/Categories/index_20220530190154.ts
@@ -0,0 +1 @@
+export * from './Categories'
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/index_20220530190157.ts b/.history/components/customer/block/Categories/index_20220530190157.ts
new file mode 100644
index 0000000..e80debf
--- /dev/null
+++ b/.history/components/customer/block/Categories/index_20220530190157.ts
@@ -0,0 +1,2 @@
+export * from './Categories'
+export * from './Categories'
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/index_20220530190201.ts b/.history/components/customer/block/Categories/index_20220530190201.ts
new file mode 100644
index 0000000..3b18803
--- /dev/null
+++ b/.history/components/customer/block/Categories/index_20220530190201.ts
@@ -0,0 +1,2 @@
+export * from './Categories'
+export * from './Skeleton'
\ No newline at end of file
diff --git a/.history/components/customer/block/Categories/index_20220530190202.ts b/.history/components/customer/block/Categories/index_20220530190202.ts
new file mode 100644
index 0000000..3b18803
--- /dev/null
+++ b/.history/components/customer/block/Categories/index_20220530190202.ts
@@ -0,0 +1,2 @@
+export * from './Categories'
+export * from './Skeleton'
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160802.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160802.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160828.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160828.tsx
new file mode 100644
index 0000000..1a49be4
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160828.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160837.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160837.tsx
new file mode 100644
index 0000000..1a608e8
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160837.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160842.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160842.tsx
new file mode 100644
index 0000000..d67ac82
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160842.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160848.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160848.tsx
new file mode 100644
index 0000000..3529630
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160848.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160851.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160851.tsx
new file mode 100644
index 0000000..bf54823
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160851.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <p></p>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160901.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160901.tsx
new file mode 100644
index 0000000..3db025d
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160901.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <p>Зона </p>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160904.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160904.tsx
new file mode 100644
index 0000000..c774dd9
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160904.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <p>Зона доставки </p>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160905.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160905.tsx
new file mode 100644
index 0000000..1af7982
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160905.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <p>Зона доставки пи</p>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160908.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160908.tsx
new file mode 100644
index 0000000..cbbaa8a
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160908.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <p>Зона доставки пиццы</p>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160917.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160917.tsx
new file mode 100644
index 0000000..1708e79
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160917.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <p>Зона доставки пиццы</p>
+    <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160922.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160922.tsx
new file mode 100644
index 0000000..2dc4721
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160922.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+      <></>
+    <p>Зона доставки пиццы</p>
+    <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160924.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160924.tsx
new file mode 100644
index 0000000..68c41e0
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160924.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+      <>
+    <p>Зона доставки пиццы</p>
+    <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160927.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160927.tsx
new file mode 100644
index 0000000..3304d33
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160927.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+      <>
+    <p>Зона доставки пиццы</p>
+    <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+         </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160929.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160929.tsx
new file mode 100644
index 0000000..d20107c
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160929.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+      <>
+    <p>Зона доставки пиццы</p>
+    <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160933.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160933.tsx
new file mode 100644
index 0000000..fb97c6e
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160933.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+    <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160934.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160934.tsx
new file mode 100644
index 0000000..ab14af9
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160934.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160935.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160935.tsx
new file mode 100644
index 0000000..eb6ddfa
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160935.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160937.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160937.tsx
new file mode 100644
index 0000000..eb6ddfa
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531160937.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC<Props> = ({children}) => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161030.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161030.tsx
new file mode 100644
index 0000000..6055ccc
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161030.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC = ({children}) => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161031.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161031.tsx
new file mode 100644
index 0000000..2c521a7
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161031.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC = ({}) => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161032.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161032.tsx
new file mode 100644
index 0000000..ec217f5
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161032.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = { children: React.ReactNode };
+
+export const DeliveryArea: React.FC = () => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161035.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161035.tsx
new file mode 100644
index 0000000..27a63bd
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161035.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DeliveryArea: React.FC = () => {
+  return (
+    <>
+        <p>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161359.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161359.tsx
new file mode 100644
index 0000000..ecb66cd
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161359.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DeliveryArea: React.FC = () => {
+  return (
+    <>
+        <p className='title_delivery'>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161402.tsx b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161402.tsx
new file mode 100644
index 0000000..ecb66cd
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/DeliveryArea_20220531161402.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DeliveryArea: React.FC = () => {
+  return (
+    <>
+        <p className='title_delivery'>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/index_20220531160748.ts b/.history/components/customer/block/DeliveryArea/index_20220531160748.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/DeliveryArea/index_20220531160812.ts b/.history/components/customer/block/DeliveryArea/index_20220531160812.ts
new file mode 100644
index 0000000..4d21243
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/index_20220531160812.ts
@@ -0,0 +1 @@
+exp
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/index_20220531160819.ts b/.history/components/customer/block/DeliveryArea/index_20220531160819.ts
new file mode 100644
index 0000000..5a3bf3c
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/index_20220531160819.ts
@@ -0,0 +1 @@
+export * from './DeliveryArea'
\ No newline at end of file
diff --git a/.history/components/customer/block/DeliveryArea/index_20220531160820.ts b/.history/components/customer/block/DeliveryArea/index_20220531160820.ts
new file mode 100644
index 0000000..5a3bf3c
--- /dev/null
+++ b/.history/components/customer/block/DeliveryArea/index_20220531160820.ts
@@ -0,0 +1 @@
+export * from './DeliveryArea'
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184318.tsx b/.history/components/customer/block/Description/Description_20220530184318.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Description/Description_20220530184328.tsx b/.history/components/customer/block/Description/Description_20220530184328.tsx
new file mode 100644
index 0000000..c35bf2c
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184328.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184337.tsx b/.history/components/customer/block/Description/Description_20220530184337.tsx
new file mode 100644
index 0000000..1e6c664
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184337.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184343.tsx b/.history/components/customer/block/Description/Description_20220530184343.tsx
new file mode 100644
index 0000000..335bb3e
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184343.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184345.tsx b/.history/components/customer/block/Description/Description_20220530184345.tsx
new file mode 100644
index 0000000..a86cbbf
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184345.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184348.tsx b/.history/components/customer/block/Description/Description_20220530184348.tsx
new file mode 100644
index 0000000..7d11e00
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184348.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184349.tsx b/.history/components/customer/block/Description/Description_20220530184349.tsx
new file mode 100644
index 0000000..7d11e00
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184349.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184402.tsx b/.history/components/customer/block/Description/Description_20220530184402.tsx
new file mode 100644
index 0000000..d1cb1c5
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184402.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184410.tsx b/.history/components/customer/block/Description/Description_20220530184410.tsx
new file mode 100644
index 0000000..93f994a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184410.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184951.tsx b/.history/components/customer/block/Description/Description_20220530184951.tsx
new file mode 100644
index 0000000..81d49b8
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184951.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import 
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184955.tsx b/.history/components/customer/block/Description/Description_20220530184955.tsx
new file mode 100644
index 0000000..ce629ba
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184955.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle}
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530184959.tsx b/.history/components/customer/block/Description/Description_20220530184959.tsx
new file mode 100644
index 0000000..1cfa8d3
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530184959.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } form './'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185002.tsx b/.history/components/customer/block/Description/Description_20220530185002.tsx
new file mode 100644
index 0000000..c3847a4
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185002.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } from './'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185007.tsx b/.history/components/customer/block/Description/Description_20220530185007.tsx
new file mode 100644
index 0000000..b3a3b84
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185007.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } from '../'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185012.tsx b/.history/components/customer/block/Description/Description_20220530185012.tsx
new file mode 100644
index 0000000..3dc4409
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185012.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } from '../../'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185014.tsx b/.history/components/customer/block/Description/Description_20220530185014.tsx
new file mode 100644
index 0000000..57636d8
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185014.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } from '../../containers'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <Container key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185020.tsx b/.history/components/customer/block/Description/Description_20220530185020.tsx
new file mode 100644
index 0000000..33e3e54
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185020.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } from '../../containers'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <ContainerTitle key={4} title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185031.tsx b/.history/components/customer/block/Description/Description_20220530185031.tsx
new file mode 100644
index 0000000..f3d9179
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185031.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ContainerTitle } from '../../containers'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185145.tsx b/.history/components/customer/block/Description/Description_20220530185145.tsx
new file mode 100644
index 0000000..b3a354f
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185145.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle } from '../../containers'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185400.tsx b/.history/components/customer/block/Description/Description_20220530185400.tsx
new file mode 100644
index 0000000..21539ea
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185400.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC<Props> = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185405.tsx b/.history/components/customer/block/Description/Description_20220530185405.tsx
new file mode 100644
index 0000000..743136a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185405.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerBox>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185407.tsx b/.history/components/customer/block/Description/Description_20220530185407.tsx
new file mode 100644
index 0000000..c5bebb8
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185407.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+        <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185409.tsx b/.history/components/customer/block/Description/Description_20220530185409.tsx
new file mode 100644
index 0000000..63efe82
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185409.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185411.tsx b/.history/components/customer/block/Description/Description_20220530185411.tsx
new file mode 100644
index 0000000..35d4ae3
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185411.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+            <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+              А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+              Pizza - отличный выход для любой из этих ситуаций.</p>
+            <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+              У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+              курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+              привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185415.tsx b/.history/components/customer/block/Description/Description_20220530185415.tsx
new file mode 100644
index 0000000..ad5be7a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185415.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+          </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185417.tsx b/.history/components/customer/block/Description/Description_20220530185417.tsx
new file mode 100644
index 0000000..3b6144b
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185417.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+            </div>
+          <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+        </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185425.tsx b/.history/components/customer/block/Description/Description_20220530185425.tsx
new file mode 100644
index 0000000..5b6574a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185425.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+            </div>
+            <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+            Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185427.tsx b/.history/components/customer/block/Description/Description_20220530185427.tsx
new file mode 100644
index 0000000..a107367
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185427.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+            </div>
+            <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                Минимальная стоимость зааза для доставки от 599 рублей
+          </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185428.tsx b/.history/components/customer/block/Description/Description_20220530185428.tsx
new file mode 100644
index 0000000..a01922f
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185428.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+            </div>
+            <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                Минимальная стоимость зааза для доставки от 599 рублей
+            </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185434.tsx b/.history/components/customer/block/Description/Description_20220530185434.tsx
new file mode 100644
index 0000000..9599a6a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185434.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                Минимальная стоимость зааза для доставки от 599 рублей
+            </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185437.tsx b/.history/components/customer/block/Description/Description_20220530185437.tsx
new file mode 100644
index 0000000..55ae7ab
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185437.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+                </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185440.tsx b/.history/components/customer/block/Description/Description_20220530185440.tsx
new file mode 100644
index 0000000..ec7e56d
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185440.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185445.tsx b/.history/components/customer/block/Description/Description_20220530185445.tsx
new file mode 100644
index 0000000..ec7e56d
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185445.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerBox>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerBox>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185503.tsx b/.history/components/customer/block/Description/Description_20220530185503.tsx
new file mode 100644
index 0000000..fb8f614
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185503.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185509.tsx b/.history/components/customer/block/Description/Description_20220530185509.tsx
new file mode 100644
index 0000000..340a4f8
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185509.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+        <div className={'m_all'}>
+          <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185515.tsx b/.history/components/customer/block/Description/Description_20220530185515.tsx
new file mode 100644
index 0000000..94fea8c
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185515.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+            <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185517.tsx b/.history/components/customer/block/Description/Description_20220530185517.tsx
new file mode 100644
index 0000000..0aca9d6
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185517.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+        </div>
+
+        <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185518.tsx b/.history/components/customer/block/Description/Description_20220530185518.tsx
new file mode 100644
index 0000000..697667e
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185518.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+        <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185519.tsx b/.history/components/customer/block/Description/Description_20220530185519.tsx
new file mode 100644
index 0000000..6462f03
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185519.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+          <div className={'container_child_box'}>
+            <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+              поразительной скоростью (не более 35 минут);
+            </p>
+            <p>
+              Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+              поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+              Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+              сайте пиццерии.
+            </p>
+          </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185523.tsx b/.history/components/customer/block/Description/Description_20220530185523.tsx
new file mode 100644
index 0000000..e1500cc
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185523.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+          <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185525.tsx b/.history/components/customer/block/Description/Description_20220530185525.tsx
new file mode 100644
index 0000000..1a05589
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185525.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+        </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185527.tsx b/.history/components/customer/block/Description/Description_20220530185527.tsx
new file mode 100644
index 0000000..7d2926b
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185527.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+    </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185529.tsx b/.history/components/customer/block/Description/Description_20220530185529.tsx
new file mode 100644
index 0000000..aa7fb36
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185529.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185531.tsx b/.history/components/customer/block/Description/Description_20220530185531.tsx
new file mode 100644
index 0000000..aa7fb36
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185531.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185820.tsx b/.history/components/customer/block/Description/Description_20220530185820.tsx
new file mode 100644
index 0000000..fc26339
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185820.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185821.tsx b/.history/components/customer/block/Description/Description_20220530185821.tsx
new file mode 100644
index 0000000..c4e3762
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185821.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+im
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185825.tsx b/.history/components/customer/block/Description/Description_20220530185825.tsx
new file mode 100644
index 0000000..4907c78
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185825.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import {}
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185829.tsx b/.history/components/customer/block/Description/Description_20220530185829.tsx
new file mode 100644
index 0000000..e69b13a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185829.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import {PictureText}
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185832.tsx b/.history/components/customer/block/Description/Description_20220530185832.tsx
new file mode 100644
index 0000000..e51b787
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185832.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText}
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185838.tsx b/.history/components/customer/block/Description/Description_20220530185838.tsx
new file mode 100644
index 0000000..1621fc6
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185838.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185839.tsx b/.history/components/customer/block/Description/Description_20220530185839.tsx
new file mode 100644
index 0000000..0674415
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185839.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185844.tsx b/.history/components/customer/block/Description/Description_20220530185844.tsx
new file mode 100644
index 0000000..a10227c
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185844.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185846.tsx b/.history/components/customer/block/Description/Description_20220530185846.tsx
new file mode 100644
index 0000000..6604555
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185846.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185847.tsx b/.history/components/customer/block/Description/Description_20220530185847.tsx
new file mode 100644
index 0000000..6604555
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185847.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184'} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185901.tsx b/.history/components/customer/block/Description/Description_20220530185901.tsx
new file mode 100644
index 0000000..d67d05b
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185901.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={'184} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185902.tsx b/.history/components/customer/block/Description/Description_20220530185902.tsx
new file mode 100644
index 0000000..bc7d782
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185902.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={184} height={'185'}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185905.tsx b/.history/components/customer/block/Description/Description_20220530185905.tsx
new file mode 100644
index 0000000..50542de
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185905.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={'185'}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185911.tsx b/.history/components/customer/block/Description/Description_20220530185911.tsx
new file mode 100644
index 0000000..6ab6da8
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185911.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184'} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185912.tsx b/.history/components/customer/block/Description/Description_20220530185912.tsx
new file mode 100644
index 0000000..e1d5555
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185912.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={'184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185913.tsx b/.history/components/customer/block/Description/Description_20220530185913.tsx
new file mode 100644
index 0000000..474ce4d
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185913.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530185952.tsx b/.history/components/customer/block/Description/Description_20220530185952.tsx
new file mode 100644
index 0000000..474ce4d
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530185952.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530190924.tsx b/.history/components/customer/block/Description/Description_20220530190924.tsx
new file mode 100644
index 0000000..43760e6
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530190924.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/a/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530190927.tsx b/.history/components/customer/block/Description/Description_20220530190927.tsx
new file mode 100644
index 0000000..008a131
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530190927.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets//Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530190928.tsx b/.history/components/customer/block/Description/Description_20220530190928.tsx
new file mode 100644
index 0000000..c394e97
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530190928.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/img/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530190931.tsx b/.history/components/customer/block/Description/Description_20220530190931.tsx
new file mode 100644
index 0000000..37fea6a
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530190931.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/im/gScreenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530190932.tsx b/.history/components/customer/block/Description/Description_20220530190932.tsx
new file mode 100644
index 0000000..c394e97
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530190932.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/img/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/Description_20220530190938.tsx b/.history/components/customer/block/Description/Description_20220530190938.tsx
new file mode 100644
index 0000000..97edca8
--- /dev/null
+++ b/.history/components/customer/block/Description/Description_20220530190938.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../containers'
+import { PictureText } from '../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/img/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/assets/img/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/index_20220530190224.ts b/.history/components/customer/block/Description/index_20220530190224.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Description/index_20220530190229.ts b/.history/components/customer/block/Description/index_20220530190229.ts
new file mode 100644
index 0000000..42151f0
--- /dev/null
+++ b/.history/components/customer/block/Description/index_20220530190229.ts
@@ -0,0 +1 @@
+export 
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/index_20220530190230.ts b/.history/components/customer/block/Description/index_20220530190230.ts
new file mode 100644
index 0000000..d983907
--- /dev/null
+++ b/.history/components/customer/block/Description/index_20220530190230.ts
@@ -0,0 +1 @@
+export * 
\ No newline at end of file
diff --git a/.history/components/customer/block/Description/index_20220530190234.ts b/.history/components/customer/block/Description/index_20220530190234.ts
new file mode 100644
index 0000000..221ea3e
--- /dev/null
+++ b/.history/components/customer/block/Description/index_20220530190234.ts
@@ -0,0 +1 @@
+export * from './Description'
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/FooterNav_20220530193614.tsx b/.history/components/customer/block/Footer/FooterNav_20220530193614.tsx
new file mode 100644
index 0000000..af91768
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220530193614.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531133717.tsx b/.history/components/customer/block/Footer/FooterNav_20220531133717.tsx
new file mode 100644
index 0000000..7da8540
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531133717.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531133720.tsx b/.history/components/customer/block/Footer/FooterNav_20220531133720.tsx
new file mode 100644
index 0000000..7da8540
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531133720.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531133724.tsx b/.history/components/customer/block/Footer/FooterNav_20220531133724.tsx
new file mode 100644
index 0000000..829aacf
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531133724.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Для партнёров</h3>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531133727.tsx b/.history/components/customer/block/Footer/FooterNav_20220531133727.tsx
new file mode 100644
index 0000000..829aacf
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531133727.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Для партнёров</h3>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531133731.tsx b/.history/components/customer/block/Footer/FooterNav_20220531133731.tsx
new file mode 100644
index 0000000..99c4361
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531133731.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Для партнёров</h3>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Контакты</h3>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531133736.tsx b/.history/components/customer/block/Footer/FooterNav_20220531133736.tsx
new file mode 100644
index 0000000..fe1075a
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531133736.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Для партнёров</h3>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Контакты</h3>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531134138.tsx b/.history/components/customer/block/Footer/FooterNav_20220531134138.tsx
new file mode 100644
index 0000000..1be2b2e
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531134138.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Для партнёров</h3>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531134139.tsx b/.history/components/customer/block/Footer/FooterNav_20220531134139.tsx
new file mode 100644
index 0000000..1be2b2e
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531134139.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h3>Для партнёров</h3>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531134204.tsx b/.history/components/customer/block/Footer/FooterNav_20220531134204.tsx
new file mode 100644
index 0000000..3246d3b
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531134204.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h3>Pizza</h3>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531134207.tsx b/.history/components/customer/block/Footer/FooterNav_20220531134207.tsx
new file mode 100644
index 0000000..e82dd6f
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531134207.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531134213.tsx b/.history/components/customer/block/Footer/FooterNav_20220531134213.tsx
new file mode 100644
index 0000000..e82dd6f
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531134213.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141333.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141333.tsx
new file mode 100644
index 0000000..004174c
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141333.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container_main'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141354.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141354.tsx
new file mode 100644
index 0000000..e82dd6f
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141354.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141404.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141404.tsx
new file mode 100644
index 0000000..f04856c
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141404.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141405.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141405.tsx
new file mode 100644
index 0000000..f04856c
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141405.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141412.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141412.tsx
new file mode 100644
index 0000000..9a6c9de
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141412.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141414.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141414.tsx
new file mode 100644
index 0000000..73489c4
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141414.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav container_main'>
+            <div className="">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141416.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141416.tsx
new file mode 100644
index 0000000..2430736
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141416.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className=' container_main'>
+            <div className="">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141417.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141417.tsx
new file mode 100644
index 0000000..e2f8dbb
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141417.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className=' container_main'>
+            <div className="footer_nav">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531141419.tsx b/.history/components/customer/block/Footer/FooterNav_20220531141419.tsx
new file mode 100644
index 0000000..61ccb8f
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531141419.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container_main'>
+            <div className="footer_nav">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531143011.tsx b/.history/components/customer/block/Footer/FooterNav_20220531143011.tsx
new file mode 100644
index 0000000..82797c4
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531143011.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+            <div className="footer_nav">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531143039.tsx b/.history/components/customer/block/Footer/FooterNav_20220531143039.tsx
new file mode 100644
index 0000000..8b31f58
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531143039.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+            <div className="footer_nav co">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531143040.tsx b/.history/components/customer/block/Footer/FooterNav_20220531143040.tsx
new file mode 100644
index 0000000..304336e
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531143040.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+            <div className="footer_nav con">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531143044.tsx b/.history/components/customer/block/Footer/FooterNav_20220531143044.tsx
new file mode 100644
index 0000000..51f4645
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531143044.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+            <div className="footer_nav container">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531143052.tsx b/.history/components/customer/block/Footer/FooterNav_20220531143052.tsx
new file mode 100644
index 0000000..31a9fab
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531143052.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145326.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145326.tsx
new file mode 100644
index 0000000..e2c121c
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145326.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145329.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145329.tsx
new file mode 100644
index 0000000..1f6898f
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145329.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <hr></hr>
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145332.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145332.tsx
new file mode 100644
index 0000000..ca2845c
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145332.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <hr>/</hr>
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145335.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145335.tsx
new file mode 100644
index 0000000..35d6b8e
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145335.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <hr/></hr>
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145337.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145337.tsx
new file mode 100644
index 0000000..fc27090
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145337.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <hr/>
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145339.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145339.tsx
new file mode 100644
index 0000000..3628f47
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145339.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+       
+        <div className='container'>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531145341.tsx b/.history/components/customer/block/Footer/FooterNav_20220531145341.tsx
new file mode 100644
index 0000000..3c8dc49
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531145341.tsx
@@ -0,0 +1,40 @@
+export const FooterNav: React.FC = () => {
+    return (
+       
+        <div className='container'>
+             <hr/>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531151045.tsx b/.history/components/customer/block/Footer/FooterNav_20220531151045.tsx
new file mode 100644
index 0000000..7808f8e
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531151045.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+             <hr/>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/FooterNav_20220531151046.tsx b/.history/components/customer/block/Footer/FooterNav_20220531151046.tsx
new file mode 100644
index 0000000..7808f8e
--- /dev/null
+++ b/.history/components/customer/block/Footer/FooterNav_20220531151046.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+             <hr/>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Footer_20220530192753.tsx b/.history/components/customer/block/Footer/Footer_20220530192753.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Footer/Footer_20220530192833.tsx b/.history/components/customer/block/Footer/Footer_20220530192833.tsx
new file mode 100644
index 0000000..2b4be0a
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192833.tsx
@@ -0,0 +1,23 @@
+const Footer = (props) => {
+    return (
+        <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192849.tsx b/.history/components/customer/block/Footer/Footer_20220530192849.tsx
new file mode 100644
index 0000000..9aaf44f
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192849.tsx
@@ -0,0 +1,25 @@
+
+
+const Footer = (props) => {
+    return (
+        <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192850.tsx b/.history/components/customer/block/Footer/Footer_20220530192850.tsx
new file mode 100644
index 0000000..2aee7d3
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192850.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const Footer = (props) => {
+    return (
+        <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192858.tsx b/.history/components/customer/block/Footer/Footer_20220530192858.tsx
new file mode 100644
index 0000000..f0dcbea
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192858.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const Footer = (props) => {
+    return (
+        <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192900.tsx b/.history/components/customer/block/Footer/Footer_20220530192900.tsx
new file mode 100644
index 0000000..993e1cc
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192900.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const Footer = (props) => {
+    return (
+        <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192906.tsx b/.history/components/customer/block/Footer/Footer_20220530192906.tsx
new file mode 100644
index 0000000..e0eef86
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192906.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const Footer = (props) => {
+    return (
+        
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192910.tsx b/.history/components/customer/block/Footer/Footer_20220530192910.tsx
new file mode 100644
index 0000000..4962155
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192910.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
+
+const Footer = (props) => {
+    return (
+        
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192914.tsx b/.history/components/customer/block/Footer/Footer_20220530192914.tsx
new file mode 100644
index 0000000..2f8a09c
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192914.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+export const Footer: React.FC<Props> = ({children}) => {
+  return (
+    <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
+
+const Footer = (props) => {
+    return (
+        
+    )
+  };
+  
+  export default Footer;
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192917.tsx b/.history/components/customer/block/Footer/Footer_20220530192917.tsx
new file mode 100644
index 0000000..ba75ec9
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192917.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Footer: React.FC<Props> = ({children}) => {
+  return (
+    <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192923.tsx b/.history/components/customer/block/Footer/Footer_20220530192923.tsx
new file mode 100644
index 0000000..5794575
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192923.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Footer: React.FC = ({children}) => {
+  return (
+    <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192925.tsx b/.history/components/customer/block/Footer/Footer_20220530192925.tsx
new file mode 100644
index 0000000..3d4ded0
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192925.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192939.tsx b/.history/components/customer/block/Footer/Footer_20220530192939.tsx
new file mode 100644
index 0000000..5ec0c1e
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192939.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={'footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192945.tsx b/.history/components/customer/block/Footer/Footer_20220530192945.tsx
new file mode 100644
index 0000000..fa71c7e
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192945.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block' + ' ' + 'footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192949.tsx b/.history/components/customer/block/Footer/Footer_20220530192949.tsx
new file mode 100644
index 0000000..105c055
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192949.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback'} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192951.tsx b/.history/components/customer/block/Footer/Footer_20220530192951.tsx
new file mode 100644
index 0000000..f002bbd
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192951.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530192958.tsx b/.history/components/customer/block/Footer/Footer_20220530192958.tsx
new file mode 100644
index 0000000..97b8333
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530192958.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block' + ' ' + ' footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530193002.tsx b/.history/components/customer/block/Footer/Footer_20220530193002.tsx
new file mode 100644
index 0000000..5fa3f18
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530193002.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound'} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530193004.tsx b/.history/components/customer/block/Footer/Footer_20220530193004.tsx
new file mode 100644
index 0000000..b21d9f6
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530193004.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound')} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={'footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530193006.tsx b/.history/components/customer/block/Footer/Footer_20220530193006.tsx
new file mode 100644
index 0000000..c480342
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530193006.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound')} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block' + ' ' + ' footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530193010.tsx b/.history/components/customer/block/Footer/Footer_20220530193010.tsx
new file mode 100644
index 0000000..dc31404
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530193010.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound')} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_about'} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530193012.tsx b/.history/components/customer/block/Footer/Footer_20220530193012.tsx
new file mode 100644
index 0000000..537ed58
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530193012.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound')} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_about')} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Footer_20220530193024.tsx b/.history/components/customer/block/Footer/Footer_20220530193024.tsx
new file mode 100644
index 0000000..537ed58
--- /dev/null
+++ b/.history/components/customer/block/Footer/Footer_20220530193024.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound')} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_about')} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/Nav_20220530192759.tsx b/.history/components/customer/block/Footer/Nav_20220530192759.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Footer/Nav_20220530193033.tsx b/.history/components/customer/block/Footer/Nav_20220530193033.tsx
new file mode 100644
index 0000000..5476f1a
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193033.tsx
@@ -0,0 +1,40 @@
+const FooterNav = (props) => {
+    return (
+        <div className={'footer_nav'}>
+            <div className="contain">
+                <div className="contain_left" > 
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
+  
+  export default FooterNav;
diff --git a/.history/components/customer/block/Footer/Nav_20220530193047.tsx b/.history/components/customer/block/Footer/Nav_20220530193047.tsx
new file mode 100644
index 0000000..0d19634
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193047.tsx
@@ -0,0 +1,40 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className={'footer_nav'}>
+            <div className="contain">
+                <div className="contain_left" > 
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
+  
+  export default FooterNav;
diff --git a/.history/components/customer/block/Footer/Nav_20220530193050.tsx b/.history/components/customer/block/Footer/Nav_20220530193050.tsx
new file mode 100644
index 0000000..f5117f9
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193050.tsx
@@ -0,0 +1,40 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className={'footer_nav'}>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
+  
+  export default FooterNav;
diff --git a/.history/components/customer/block/Footer/Nav_20220530193054.tsx b/.history/components/customer/block/Footer/Nav_20220530193054.tsx
new file mode 100644
index 0000000..253c73d
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193054.tsx
@@ -0,0 +1,40 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className={'footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
+  
+  export default FooterNav;
diff --git a/.history/components/customer/block/Footer/Nav_20220530193055.tsx b/.history/components/customer/block/Footer/Nav_20220530193055.tsx
new file mode 100644
index 0000000..6c1b145
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193055.tsx
@@ -0,0 +1,40 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
+  
+  export default FooterNav;
diff --git a/.history/components/customer/block/Footer/Nav_20220530193102.tsx b/.history/components/customer/block/Footer/Nav_20220530193102.tsx
new file mode 100644
index 0000000..9a181c7
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193102.tsx
@@ -0,0 +1,39 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
+
diff --git a/.history/components/customer/block/Footer/Nav_20220530193103.tsx b/.history/components/customer/block/Footer/Nav_20220530193103.tsx
new file mode 100644
index 0000000..873714a
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193103.tsx
@@ -0,0 +1,38 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Nav_20220530193105.tsx b/.history/components/customer/block/Footer/Nav_20220530193105.tsx
new file mode 100644
index 0000000..873714a
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193105.tsx
@@ -0,0 +1,38 @@
+export const Footer: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Nav_20220530193119.tsx b/.history/components/customer/block/Footer/Nav_20220530193119.tsx
new file mode 100644
index 0000000..344d1f7
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193119.tsx
@@ -0,0 +1,38 @@
+export const Nav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Nav_20220530193120.tsx b/.history/components/customer/block/Footer/Nav_20220530193120.tsx
new file mode 100644
index 0000000..344d1f7
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193120.tsx
@@ -0,0 +1,38 @@
+export const Nav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Nav_20220530193611.tsx b/.history/components/customer/block/Footer/Nav_20220530193611.tsx
new file mode 100644
index 0000000..7254b8f
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193611.tsx
@@ -0,0 +1,38 @@
+export const FoNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Nav_20220530193613.tsx b/.history/components/customer/block/Footer/Nav_20220530193613.tsx
new file mode 100644
index 0000000..af91768
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193613.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/Nav_20220530193615.tsx b/.history/components/customer/block/Footer/Nav_20220530193615.tsx
new file mode 100644
index 0000000..af91768
--- /dev/null
+++ b/.history/components/customer/block/Footer/Nav_20220530193615.tsx
@@ -0,0 +1,38 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='footer_nav'>
+            <div className="contain">
+                <div className="contain_left" >
+                    <div className="col">
+                        <h1>Pizza</h1>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Для партнёров</h1>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <h1>Контакты</h1>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h1>8 (999) 99-99-99</h1>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/.history/components/customer/block/Footer/index_20220530192805.ts b/.history/components/customer/block/Footer/index_20220530192805.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Footer/index_20220530192813.ts b/.history/components/customer/block/Footer/index_20220530192813.ts
new file mode 100644
index 0000000..2f27a4c
--- /dev/null
+++ b/.history/components/customer/block/Footer/index_20220530192813.ts
@@ -0,0 +1 @@
+export * from './Footer'
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/index_20220530192823.ts b/.history/components/customer/block/Footer/index_20220530192823.ts
new file mode 100644
index 0000000..e646415
--- /dev/null
+++ b/.history/components/customer/block/Footer/index_20220530192823.ts
@@ -0,0 +1,2 @@
+export * from './Footer'
+export * from './Nav'
\ No newline at end of file
diff --git a/.history/components/customer/block/Footer/index_20220530193832.ts b/.history/components/customer/block/Footer/index_20220530193832.ts
new file mode 100644
index 0000000..ef1a22e
--- /dev/null
+++ b/.history/components/customer/block/Footer/index_20220530193832.ts
@@ -0,0 +1,2 @@
+export * from './Footer'
+export * from './FooterNav'
\ No newline at end of file
diff --git a/.history/components/customer/block/Header/Header_20220530183822.tsx b/.history/components/customer/block/Header/Header_20220530183822.tsx
new file mode 100644
index 0000000..0cfa7a5
--- /dev/null
+++ b/.history/components/customer/block/Header/Header_20220530183822.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './search';
+import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/block/Header/Header_20220530192632.tsx b/.history/components/customer/block/Header/Header_20220530192632.tsx
new file mode 100644
index 0000000..610a747
--- /dev/null
+++ b/.history/components/customer/block/Header/Header_20220530192632.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/block/Header/Header_20220530192635.tsx b/.history/components/customer/block/Header/Header_20220530192635.tsx
new file mode 100644
index 0000000..610a747
--- /dev/null
+++ b/.history/components/customer/block/Header/Header_20220530192635.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/block/Header/index_20220530192614.ts b/.history/components/customer/block/Header/index_20220530192614.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Header/index_20220530192618.ts b/.history/components/customer/block/Header/index_20220530192618.ts
new file mode 100644
index 0000000..7647e34
--- /dev/null
+++ b/.history/components/customer/block/Header/index_20220530192618.ts
@@ -0,0 +1 @@
+ex
\ No newline at end of file
diff --git a/.history/components/customer/block/Header/index_20220530192623.ts b/.history/components/customer/block/Header/index_20220530192623.ts
new file mode 100644
index 0000000..220d1b1
--- /dev/null
+++ b/.history/components/customer/block/Header/index_20220530192623.ts
@@ -0,0 +1 @@
+export * from './Header'
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528173552.ts b/.history/components/customer/block/Motto/Index_20220528173552.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Motto/Index_20220528173621.ts b/.history/components/customer/block/Motto/Index_20220528173621.ts
new file mode 100644
index 0000000..e76bfc3
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528173621.ts
@@ -0,0 +1,18 @@
+import React from 'react'
+import { IconFire, IconMoped } from '../../component/Icon';
+import Typography from '../../component/Typography';
+
+ const TitleHeader = (props) => {
+    return(
+        <div className="title_header">
+            <div className="title_header_box">
+                <IconFire/> <Typography> Горячая пицца для каждого  </Typography> 
+            </div>
+            <div className="title_header_box">
+                <IconMoped/> <Typography>Долетим за 35 минут </Typography>
+            </div>
+        </div>
+    )
+}
+
+export default TitleHeader;
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528173742.ts b/.history/components/customer/block/Motto/Index_20220528173742.ts
new file mode 100644
index 0000000..4346ba6
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528173742.ts
@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconFire, IconMoped } from '../../component/Icon';
+import Typography from '../../component/Typography';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+    <div className="title_header_box">
+        <IconFire/> <Typography> Горячая пицца для каждого  </Typography> 
+    </div>
+    <div className="title_header_box">
+        <IconMoped/> <Typography>Долетим за 35 минут </Typography>
+    </div>
+</div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174044.ts b/.history/components/customer/block/Motto/Index_20220528174044.ts
new file mode 100644
index 0000000..66ca044
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174044.ts
@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconFire, IconMoped } from '../../component/Icon';
+import Typography from '../../component/Typography';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+    <div className="title_header_box">
+    <p className={'icon_moped '}/> <Typography> Горячая пицца для каждого  </Typography> 
+    </div>
+    <div className="title_header_box">
+        <IconMoped/> <Typography>Долетим за 35 минут </Typography>
+    </div>
+</div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174110.ts b/.history/components/customer/block/Motto/Index_20220528174110.ts
new file mode 100644
index 0000000..962748d
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174110.ts
@@ -0,0 +1,15 @@
+import React from 'react'
+import Typography from '../../component/Typography';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}/> <Typography> Горячая пицца для каждого  </Typography> 
+        </div>
+        <div className="title_header_box">
+            <IconMoped/> <Typography>Долетим за 35 минут </Typography>
+        </div>
+</div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174158.ts b/.history/components/customer/block/Motto/Index_20220528174158.ts
new file mode 100644
index 0000000..e43c84e
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174158.ts
@@ -0,0 +1,19 @@
+import React from 'react'
+import Typography from '../../component/Typography';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}> 
+                <Typography> Горячая пицца для каждого  </Typography>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}> 
+                <Typography>Долетим за 35 минут </Typography>
+            </p>
+        </div>
+</div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174301.ts b/.history/components/customer/block/Motto/Index_20220528174301.ts
new file mode 100644
index 0000000..5b347b2
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174301.ts
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}> 
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}> 
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174356.ts b/.history/components/customer/block/Motto/Index_20220528174356.ts
new file mode 100644
index 0000000..6c0594e
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174356.ts
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const MottoBlock: React.FC = ({}) => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}> 
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}> 
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174449.ts b/.history/components/customer/block/Motto/Index_20220528174449.ts
new file mode 100644
index 0000000..9243a6e
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174449.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = ({}) => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}> 
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}> 
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174535.tsx b/.history/components/customer/block/Motto/Index_20220528174535.tsx
new file mode 100644
index 0000000..9243a6e
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174535.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = ({}) => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}> 
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}> 
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174536.ts b/.history/components/customer/block/Motto/Index_20220528174536.ts
new file mode 100644
index 0000000..9243a6e
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174536.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = ({}) => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}> 
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}> 
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528174550.tsx b/.history/components/customer/block/Motto/Index_20220528174550.tsx
new file mode 100644
index 0000000..12c595e
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528174550.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped '}>
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233516.tsx b/.history/components/customer/block/Motto/Index_20220528233516.tsx
new file mode 100644
index 0000000..8522365
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233516.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h1 className="typography_h1"> Горячая пицца для каждого  </h1>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233557.tsx b/.history/components/customer/block/Motto/Index_20220528233557.tsx
new file mode 100644
index 0000000..28da364
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233557.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h1 className="typography_h1"> Долетим за 35 минут </h1>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233621.tsx b/.history/components/customer/block/Motto/Index_20220528233621.tsx
new file mode 100644
index 0000000..e52e8d7
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233621.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233637.tsx b/.history/components/customer/block/Motto/Index_20220528233637.tsx
new file mode 100644
index 0000000..5568ffb
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233637.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+          
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233638.tsx b/.history/components/customer/block/Motto/Index_20220528233638.tsx
new file mode 100644
index 0000000..fc111e7
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233638.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+          
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233640.tsx b/.history/components/customer/block/Motto/Index_20220528233640.tsx
new file mode 100644
index 0000000..80d86b6
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233640.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+ 
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+          
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233642.tsx b/.history/components/customer/block/Motto/Index_20220528233642.tsx
new file mode 100644
index 0000000..c02d78c
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233642.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+ 
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+    
+        </div>
+        <div className="title_header_box">
+          
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233651.tsx b/.history/components/customer/block/Motto/Index_20220528233651.tsx
new file mode 100644
index 0000000..e52e8d7
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233651.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528233654.tsx b/.history/components/customer/block/Motto/Index_20220528233654.tsx
new file mode 100644
index 0000000..e52e8d7
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528233654.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <p className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </p>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528234122.tsx b/.history/components/customer/block/Motto/Index_20220528234122.tsx
new file mode 100644
index 0000000..323ec24
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528234122.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+        <div className="title_header_box">
+            <p className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </p>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220528234126.tsx b/.history/components/customer/block/Motto/Index_20220528234126.tsx
new file mode 100644
index 0000000..b1431d3
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220528234126.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143929.tsx b/.history/components/customer/block/Motto/Index_20220529143929.tsx
new file mode 100644
index 0000000..4a45a28
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143929.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143930.tsx b/.history/components/customer/block/Motto/Index_20220529143930.tsx
new file mode 100644
index 0000000..fc1e19d
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143930.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143933.tsx b/.history/components/customer/block/Motto/Index_20220529143933.tsx
new file mode 100644
index 0000000..140f1af
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143933.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143935.tsx b/.history/components/customer/block/Motto/Index_20220529143935.tsx
new file mode 100644
index 0000000..ac64f33
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143935.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143940.tsx b/.history/components/customer/block/Motto/Index_20220529143940.tsx
new file mode 100644
index 0000000..beb7fd4
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143940.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143941.tsx b/.history/components/customer/block/Motto/Index_20220529143941.tsx
new file mode 100644
index 0000000..58f852c
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143941.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}>            </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143944.tsx b/.history/components/customer/block/Motto/Index_20220529143944.tsx
new file mode 100644
index 0000000..fe1a230
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143944.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143945.tsx b/.history/components/customer/block/Motto/Index_20220529143945.tsx
new file mode 100644
index 0000000..abd7447
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143945.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529143946.tsx b/.history/components/customer/block/Motto/Index_20220529143946.tsx
new file mode 100644
index 0000000..518b4fb
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529143946.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+            <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144402.tsx b/.history/components/customer/block/Motto/Index_20220529144402.tsx
new file mode 100644
index 0000000..b6c3614
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144402.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+            <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144408.tsx b/.history/components/customer/block/Motto/Index_20220529144408.tsx
new file mode 100644
index 0000000..09b4700
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144408.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+            <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144413.tsx b/.history/components/customer/block/Motto/Index_20220529144413.tsx
new file mode 100644
index 0000000..157082a
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144413.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+            <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+    </
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144415.tsx b/.history/components/customer/block/Motto/Index_20220529144415.tsx
new file mode 100644
index 0000000..d3fb77d
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144415.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+            <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144418.tsx b/.history/components/customer/block/Motto/Index_20220529144418.tsx
new file mode 100644
index 0000000..176fb42
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144418.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+    <div className="title_header">
+        <div className="title_header_box">
+            <div className={'icon_moped'}> </div>
+            <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+        </div>
+        <div className="title_header_box">
+            <div className={'icon_fire'}> </div>
+            <h2 className="typography_h1"> Долетим за 35 минут </h2>
+        </div>
+    </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144420.tsx b/.history/components/customer/block/Motto/Index_20220529144420.tsx
new file mode 100644
index 0000000..6e6a3ec
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144420.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144847.tsx b/.history/components/customer/block/Motto/Index_20220529144847.tsx
new file mode 100644
index 0000000..e9b7164
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144847.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144848.tsx b/.history/components/customer/block/Motto/Index_20220529144848.tsx
new file mode 100644
index 0000000..1490cba
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144848.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144904.tsx b/.history/components/customer/block/Motto/Index_20220529144904.tsx
new file mode 100644
index 0000000..7975d34
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144904.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={' icon_moped icon_fire'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144907.tsx b/.history/components/customer/block/Motto/Index_20220529144907.tsx
new file mode 100644
index 0000000..487666f
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144907.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={' icon_moped'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144908.tsx b/.history/components/customer/block/Motto/Index_20220529144908.tsx
new file mode 100644
index 0000000..07ce6b1
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144908.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Motto/Index_20220529144910.tsx b/.history/components/customer/block/Motto/Index_20220529144910.tsx
new file mode 100644
index 0000000..f1af6d1
--- /dev/null
+++ b/.history/components/customer/block/Motto/Index_20220529144910.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/block/Pizza/Block_20220529134947.tsx b/.history/components/customer/block/Pizza/Block_20220529134947.tsx
new file mode 100644
index 0000000..d81a315
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529134947.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151154.tsx b/.history/components/customer/block/Pizza/Block_20220529151154.tsx
new file mode 100644
index 0000000..5642156
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151154.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={197}
+                    height={198}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151209.tsx b/.history/components/customer/block/Pizza/Block_20220529151209.tsx
new file mode 100644
index 0000000..111e1de
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151209.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={197}
+                    height={200}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151211.tsx b/.history/components/customer/block/Pizza/Block_20220529151211.tsx
new file mode 100644
index 0000000..5642156
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151211.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={197}
+                    height={198}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151214.tsx b/.history/components/customer/block/Pizza/Block_20220529151214.tsx
new file mode 100644
index 0000000..111e1de
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151214.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={197}
+                    height={200}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151217.tsx b/.history/components/customer/block/Pizza/Block_20220529151217.tsx
new file mode 100644
index 0000000..0b8238f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151217.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={200}
+                    height={200}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151220.tsx b/.history/components/customer/block/Pizza/Block_20220529151220.tsx
new file mode 100644
index 0000000..0b8238f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151220.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={200}
+                    height={200}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151304.tsx b/.history/components/customer/block/Pizza/Block_20220529151304.tsx
new file mode 100644
index 0000000..bb25b87
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151304.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={200}
+                    height={200}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151317.tsx b/.history/components/customer/block/Pizza/Block_20220529151317.tsx
new file mode 100644
index 0000000..0b8238f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151317.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={200}
+                    height={200}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151321.tsx b/.history/components/customer/block/Pizza/Block_20220529151321.tsx
new file mode 100644
index 0000000..cb9f1de
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151321.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Block_20220529151346.tsx b/.history/components/customer/block/Pizza/Block_20220529151346.tsx
new file mode 100644
index 0000000..dfe53cb
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Block_20220529151346.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220516232835.tsx b/.history/components/customer/block/Pizza/Skeleton_20220516232835.tsx
new file mode 100644
index 0000000..a6410f2
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220516232835.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const Skeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529145237.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529145237.tsx
new file mode 100644
index 0000000..81e35bc
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529145237.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const PiSkeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529145240.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529145240.tsx
new file mode 100644
index 0000000..3f8cec9
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529145240.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150155.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150155.tsx
new file mode 100644
index 0000000..eba2f88
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150155.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150210.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150210.tsx
new file mode 100644
index 0000000..b5a2f9d
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150210.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150555.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150555.tsx
new file mode 100644
index 0000000..bf6c63d
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150555.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150600.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150600.tsx
new file mode 100644
index 0000000..9db6df4
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150600.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150630.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150630.tsx
new file mode 100644
index 0000000..66e8343
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150630.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="426" rx="10" ry="10" width="280" height="88" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150634.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150634.tsx
new file mode 100644
index 0000000..9db6df4
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150634.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150636.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150636.tsx
new file mode 100644
index 0000000..3ea6c54
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150636.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="20" ry="10" width="280" height="88" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150640.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150640.tsx
new file mode 100644
index 0000000..9db6df4
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150640.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150644.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150644.tsx
new file mode 100644
index 0000000..c51676e
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150644.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="100" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150649.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150649.tsx
new file mode 100644
index 0000000..c799b7a
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150649.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150720.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150720.tsx
new file mode 100644
index 0000000..a117954
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150720.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="155" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150737.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150737.tsx
new file mode 100644
index 0000000..a117954
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150737.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="155" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150743.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150743.tsx
new file mode 100644
index 0000000..c799b7a
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150743.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150747.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150747.tsx
new file mode 100644
index 0000000..f393312
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150747.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="130" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/Skeleton_20220529150801.tsx b/.history/components/customer/block/Pizza/Skeleton_20220529150801.tsx
new file mode 100644
index 0000000..02cdc61
--- /dev/null
+++ b/.history/components/customer/block/Pizza/Skeleton_20220529150801.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={300}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="130" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/.history/components/customer/block/Pizza/index_20220518134249.tsx b/.history/components/customer/block/Pizza/index_20220518134249.tsx
new file mode 100644
index 0000000..c576de2
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220518134249.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../redux/cart/selectors';
+import { CartItem } from '../../../redux/cart/types';
+import { addItem } from '../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/block/Pizza/index_20220518152148.tsx b/.history/components/customer/block/Pizza/index_20220518152148.tsx
new file mode 100644
index 0000000..7b36ad9
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220518152148.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/block/Pizza/index_20220518152154.tsx b/.history/components/customer/block/Pizza/index_20220518152154.tsx
new file mode 100644
index 0000000..7b36ad9
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220518152154.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/.history/components/customer/block/Pizza/index_20220529000252.tsx b/.history/components/customer/block/Pizza/index_20220529000252.tsx
new file mode 100644
index 0000000..120de59
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000252.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000308.tsx b/.history/components/customer/block/Pizza/index_20220529000308.tsx
new file mode 100644
index 0000000..d5fe707
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000308.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+<li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000312.tsx b/.history/components/customer/block/Pizza/index_20220529000312.tsx
new file mode 100644
index 0000000..96ec088
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000312.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+        <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000314.tsx b/.history/components/customer/block/Pizza/index_20220529000314.tsx
new file mode 100644
index 0000000..57334b5
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000314.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000324.tsx b/.history/components/customer/block/Pizza/index_20220529000324.tsx
new file mode 100644
index 0000000..604372b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000324.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import Image from 'next/image';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../../redux/cart/selectors';
+import { CartItem } from '../../../../redux/cart/types';
+import { addItem } from '../../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000348.tsx b/.history/components/customer/block/Pizza/index_20220529000348.tsx
new file mode 100644
index 0000000..9c9af51
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000348.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import Image from 'next/image';
+
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000351.tsx b/.history/components/customer/block/Pizza/index_20220529000351.tsx
new file mode 100644
index 0000000..83ee126
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000351.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import Image from 'next/image';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000355.tsx b/.history/components/customer/block/Pizza/index_20220529000355.tsx
new file mode 100644
index 0000000..1291c1e
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000355.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import Image from 'next/image';
+
+
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000357.tsx b/.history/components/customer/block/Pizza/index_20220529000357.tsx
new file mode 100644
index 0000000..4a3f668
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000357.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import Image from 'next/image';
+
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000358.tsx b/.history/components/customer/block/Pizza/index_20220529000358.tsx
new file mode 100644
index 0000000..7ad94b2
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000358.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000414.tsx b/.history/components/customer/block/Pizza/index_20220529000414.tsx
new file mode 100644
index 0000000..f7600fe
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000414.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000419.tsx b/.history/components/customer/block/Pizza/index_20220529000419.tsx
new file mode 100644
index 0000000..e0aab6e
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000419.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000436.tsx b/.history/components/customer/block/Pizza/index_20220529000436.tsx
new file mode 100644
index 0000000..f7600fe
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000436.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000437.tsx b/.history/components/customer/block/Pizza/index_20220529000437.tsx
new file mode 100644
index 0000000..493315c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000437.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000443.tsx b/.history/components/customer/block/Pizza/index_20220529000443.tsx
new file mode 100644
index 0000000..666fc65
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000443.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000449.tsx b/.history/components/customer/block/Pizza/index_20220529000449.tsx
new file mode 100644
index 0000000..65341d2
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000449.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log();
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000451.tsx b/.history/components/customer/block/Pizza/index_20220529000451.tsx
new file mode 100644
index 0000000..6fb95f5
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000451.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000452.tsx b/.history/components/customer/block/Pizza/index_20220529000452.tsx
new file mode 100644
index 0000000..aca74ce
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000452.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => props.updateData({status:true, id:props.id})}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000502.tsx b/.history/components/customer/block/Pizza/index_20220529000502.tsx
new file mode 100644
index 0000000..d9f4365
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000502.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000503.tsx b/.history/components/customer/block/Pizza/index_20220529000503.tsx
new file mode 100644
index 0000000..a8373b7
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000503.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить</Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000511.tsx b/.history/components/customer/block/Pizza/index_20220529000511.tsx
new file mode 100644
index 0000000..637ea41
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000511.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000512.tsx b/.history/components/customer/block/Pizza/index_20220529000512.tsx
new file mode 100644
index 0000000..637ea41
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000512.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000518.tsx b/.history/components/customer/block/Pizza/index_20220529000518.tsx
new file mode 100644
index 0000000..5f6962c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000518.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import 
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000519.tsx b/.history/components/customer/block/Pizza/index_20220529000519.tsx
new file mode 100644
index 0000000..7fe898a
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000519.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {}
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000521.tsx b/.history/components/customer/block/Pizza/index_20220529000521.tsx
new file mode 100644
index 0000000..fd32b7a
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000521.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} fo
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000526.tsx b/.history/components/customer/block/Pizza/index_20220529000526.tsx
new file mode 100644
index 0000000..c912006
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000526.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} from 
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000528.tsx b/.history/components/customer/block/Pizza/index_20220529000528.tsx
new file mode 100644
index 0000000..21fc6e6
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000528.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} from './'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000530.tsx b/.history/components/customer/block/Pizza/index_20220529000530.tsx
new file mode 100644
index 0000000..164d57c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000530.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} from '../'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000534.tsx b/.history/components/customer/block/Pizza/index_20220529000534.tsx
new file mode 100644
index 0000000..c445e3b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000534.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} from '../../'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000542.tsx b/.history/components/customer/block/Pizza/index_20220529000542.tsx
new file mode 100644
index 0000000..d8becb5
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000542.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} from '../../../UI/'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000544.tsx b/.history/components/customer/block/Pizza/index_20220529000544.tsx
new file mode 100644
index 0000000..2dffb0c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000544.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {} from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000554.tsx b/.history/components/customer/block/Pizza/index_20220529000554.tsx
new file mode 100644
index 0000000..03d23ac
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000554.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000600.tsx b/.history/components/customer/block/Pizza/index_20220529000600.tsx
new file mode 100644
index 0000000..d84c978
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000600.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg,Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000602.tsx b/.history/components/customer/block/Pizza/index_20220529000602.tsx
new file mode 100644
index 0000000..61f568f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000602.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{props.price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000607.tsx b/.history/components/customer/block/Pizza/index_20220529000607.tsx
new file mode 100644
index 0000000..14e154d
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000607.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{props.compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000611.tsx b/.history/components/customer/block/Pizza/index_20220529000611.tsx
new file mode 100644
index 0000000..08a14b7
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000611.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{props.title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000613.tsx b/.history/components/customer/block/Pizza/index_20220529000613.tsx
new file mode 100644
index 0000000..fe737ce
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000613.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={props.alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000616.tsx b/.history/components/customer/block/Pizza/index_20220529000616.tsx
new file mode 100644
index 0000000..8c26fba
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000616.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={props.src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000618.tsx b/.history/components/customer/block/Pizza/index_20220529000618.tsx
new file mode 100644
index 0000000..7fe34cc
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000618.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000628.tsx b/.history/components/customer/block/Pizza/index_20220529000628.tsx
new file mode 100644
index 0000000..5b6eb1b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000628.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000632.tsx b/.history/components/customer/block/Pizza/index_20220529000632.tsx
new file mode 100644
index 0000000..6a5c58b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000632.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  sizes,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000635.tsx b/.history/components/customer/block/Pizza/index_20220529000635.tsx
new file mode 100644
index 0000000..bcfc1ee
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000635.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000639.tsx b/.history/components/customer/block/Pizza/index_20220529000639.tsx
new file mode 100644
index 0000000..dfd260f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000639.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000643.tsx b/.history/components/customer/block/Pizza/index_20220529000643.tsx
new file mode 100644
index 0000000..dfd260f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000643.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000834.tsx b/.history/components/customer/block/Pizza/index_20220529000834.tsx
new file mode 100644
index 0000000..6f5c3c4
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000834.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000840.tsx b/.history/components/customer/block/Pizza/index_20220529000840.tsx
new file mode 100644
index 0000000..dfd260f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000840.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000845.tsx b/.history/components/customer/block/Pizza/index_20220529000845.tsx
new file mode 100644
index 0000000..4466452
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000845.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  src: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000846.tsx b/.history/components/customer/block/Pizza/index_20220529000846.tsx
new file mode 100644
index 0000000..d8585da
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000846.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  src: ы;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000849.tsx b/.history/components/customer/block/Pizza/index_20220529000849.tsx
new file mode 100644
index 0000000..b78dd1f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000849.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  src: string;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000853.tsx b/.history/components/customer/block/Pizza/index_20220529000853.tsx
new file mode 100644
index 0000000..76464eb
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000853.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  src: string;
+  alt: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000900.tsx b/.history/components/customer/block/Pizza/index_20220529000900.tsx
new file mode 100644
index 0000000..b78dd1f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000900.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  src: string;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  price,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000903.tsx b/.history/components/customer/block/Pizza/index_20220529000903.tsx
new file mode 100644
index 0000000..bcfc1ee
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000903.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  src,
+  alt,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000917.tsx b/.history/components/customer/block/Pizza/index_20220529000917.tsx
new file mode 100644
index 0000000..6f85120
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000917.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  alt,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={src}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000919.tsx b/.history/components/customer/block/Pizza/index_20220529000919.tsx
new file mode 100644
index 0000000..1534b1b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000919.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  alt,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={alt}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000934.tsx b/.history/components/customer/block/Pizza/index_20220529000934.tsx
new file mode 100644
index 0000000..c0d588a
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000934.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  alt,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000937.tsx b/.history/components/customer/block/Pizza/index_20220529000937.tsx
new file mode 100644
index 0000000..70166d9
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000937.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000947.tsx b/.history/components/customer/block/Pizza/index_20220529000947.tsx
new file mode 100644
index 0000000..70166d9
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000947.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529000953.tsx b/.history/components/customer/block/Pizza/index_20220529000953.tsx
new file mode 100644
index 0000000..f9bd156
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529000953.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001003.tsx b/.history/components/customer/block/Pizza/index_20220529001003.tsx
new file mode 100644
index 0000000..5899667
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001003.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001010.tsx b/.history/components/customer/block/Pizza/index_20220529001010.tsx
new file mode 100644
index 0000000..99ec667
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001010.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001031.tsx b/.history/components/customer/block/Pizza/index_20220529001031.tsx
new file mode 100644
index 0000000..72f53ff
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001031.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001035.tsx b/.history/components/customer/block/Pizza/index_20220529001035.tsx
new file mode 100644
index 0000000..29e4903
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001035.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+  types,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001038.tsx b/.history/components/customer/block/Pizza/index_20220529001038.tsx
new file mode 100644
index 0000000..d98f45b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001038.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001047.tsx b/.history/components/customer/block/Pizza/index_20220529001047.tsx
new file mode 100644
index 0000000..f031693
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001047.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd(id)}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001103.tsx b/.history/components/customer/block/Pizza/index_20220529001103.tsx
new file mode 100644
index 0000000..b900cc5
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001103.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={(e) => onClickAdd(id)}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001105.tsx b/.history/components/customer/block/Pizza/index_20220529001105.tsx
new file mode 100644
index 0000000..f031693
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001105.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd(id)}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001110.tsx b/.history/components/customer/block/Pizza/index_20220529001110.tsx
new file mode 100644
index 0000000..d98f45b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001110.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001326.tsx b/.history/components/customer/block/Pizza/index_20220529001326.tsx
new file mode 100644
index 0000000..d98f45b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001326.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001440.tsx b/.history/components/customer/block/Pizza/index_20220529001440.tsx
new file mode 100644
index 0000000..ec2d9c5
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001440.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001441.tsx b/.history/components/customer/block/Pizza/index_20220529001441.tsx
new file mode 100644
index 0000000..ec2d9c5
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001441.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI'
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001455.tsx b/.history/components/customer/block/Pizza/index_20220529001455.tsx
new file mode 100644
index 0000000..0a4b205
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001455.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={"vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001503.tsx b/.history/components/customer/block/Pizza/index_20220529001503.tsx
new file mode 100644
index 0000000..9bd6d61
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001503.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001506.tsx b/.history/components/customer/block/Pizza/index_20220529001506.tsx
new file mode 100644
index 0000000..0709beb
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001506.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001508.tsx b/.history/components/customer/block/Pizza/index_20220529001508.tsx
new file mode 100644
index 0000000..9bd6d61
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001508.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item " + " "+ " product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001512.tsx b/.history/components/customer/block/Pizza/index_20220529001512.tsx
new file mode 100644
index 0000000..e4e7176
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001512.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card"}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001515.tsx b/.history/components/customer/block/Pizza/index_20220529001515.tsx
new file mode 100644
index 0000000..c2f582f
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001515.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link"'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001531.tsx b/.history/components/customer/block/Pizza/index_20220529001531.tsx
new file mode 100644
index 0000000..2924562
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001531.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529001532.tsx b/.history/components/customer/block/Pizza/index_20220529001532.tsx
new file mode 100644
index 0000000..2924562
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529001532.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004227.tsx b/.history/components/customer/block/Pizza/index_20220529004227.tsx
new file mode 100644
index 0000000..2924562
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004227.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  compound: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004235.tsx b/.history/components/customer/block/Pizza/index_20220529004235.tsx
new file mode 100644
index 0000000..51fcf74
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004235.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  compound,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004237.tsx b/.history/components/customer/block/Pizza/index_20220529004237.tsx
new file mode 100644
index 0000000..2026af0
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004237.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{compound}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004239.tsx b/.history/components/customer/block/Pizza/index_20220529004239.tsx
new file mode 100644
index 0000000..8b08c0b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004239.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004410.tsx b/.history/components/customer/block/Pizza/index_20220529004410.tsx
new file mode 100644
index 0000000..7c5bd08
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004410.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004411.tsx b/.history/components/customer/block/Pizza/index_20220529004411.tsx
new file mode 100644
index 0000000..7c5bd08
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004411.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004525.tsx b/.history/components/customer/block/Pizza/index_20220529004525.tsx
new file mode 100644
index 0000000..33140de
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004525.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004546.tsx b/.history/components/customer/block/Pizza/index_20220529004546.tsx
new file mode 100644
index 0000000..7c5bd08
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004546.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  imageUrl,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004954.tsx b/.history/components/customer/block/Pizza/index_20220529004954.tsx
new file mode 100644
index 0000000..15e6f9a
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004954.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  imageUrl: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004955.tsx b/.history/components/customer/block/Pizza/index_20220529004955.tsx
new file mode 100644
index 0000000..d5c2e91
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004955.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={imageUrl}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529004957.tsx b/.history/components/customer/block/Pizza/index_20220529004957.tsx
new file mode 100644
index 0000000..42c37f3
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529004957.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005002.tsx b/.history/components/customer/block/Pizza/index_20220529005002.tsx
new file mode 100644
index 0000000..d0449cd
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005002.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005004.tsx b/.history/components/customer/block/Pizza/index_20220529005004.tsx
new file mode 100644
index 0000000..b6f7ced
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005004.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{price}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005007.tsx b/.history/components/customer/block/Pizza/index_20220529005007.tsx
new file mode 100644
index 0000000..088cf59
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005007.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005050.tsx b/.history/components/customer/block/Pizza/index_20220529005050.tsx
new file mode 100644
index 0000000..b1670ca
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005050.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005137.tsx b/.history/components/customer/block/Pizza/index_20220529005137.tsx
new file mode 100644
index 0000000..f8cf5ad
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005137.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/ass'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005156.tsx b/.history/components/customer/block/Pizza/index_20220529005156.tsx
new file mode 100644
index 0000000..276615b
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005156.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005158.tsx b/.history/components/customer/block/Pizza/index_20220529005158.tsx
new file mode 100644
index 0000000..fb0086c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005158.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529005159.tsx b/.history/components/customer/block/Pizza/index_20220529005159.tsx
new file mode 100644
index 0000000..fb0086c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529005159.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>{heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529134938.tsx b/.history/components/customer/block/Pizza/index_20220529134938.tsx
new file mode 100644
index 0000000..0f905db
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529134938.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad}</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529134948.tsx b/.history/components/customer/block/Pizza/index_20220529134948.tsx
new file mode 100644
index 0000000..d81a315
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529134948.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    className = {'vendor-item__images'}
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={187}
+                    height={188}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/block/Pizza/index_20220529145330.ts b/.history/components/customer/block/Pizza/index_20220529145330.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/Pizza/index_20220529145334.ts b/.history/components/customer/block/Pizza/index_20220529145334.ts
new file mode 100644
index 0000000..49e0821
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145334.ts
@@ -0,0 +1 @@
+PizzaSkeleton
\ No newline at end of file
diff --git a/.history/components/customer/block/Pizza/index_20220529145344.ts b/.history/components/customer/block/Pizza/index_20220529145344.ts
new file mode 100644
index 0000000..892091c
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145344.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+PizzaSkeleton
\ No newline at end of file
diff --git a/.history/components/customer/block/Pizza/index_20220529145347.ts b/.history/components/customer/block/Pizza/index_20220529145347.ts
new file mode 100644
index 0000000..445b163
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145347.ts
@@ -0,0 +1 @@
+export * from './BoxScroll';
diff --git a/.history/components/customer/block/Pizza/index_20220529145352.ts b/.history/components/customer/block/Pizza/index_20220529145352.ts
new file mode 100644
index 0000000..b13bb4e
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145352.ts
@@ -0,0 +1 @@
+export * from './';
diff --git a/.history/components/customer/block/Pizza/index_20220529145355.ts b/.history/components/customer/block/Pizza/index_20220529145355.ts
new file mode 100644
index 0000000..8bb2187
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145355.ts
@@ -0,0 +1 @@
+export * from './Block';
diff --git a/.history/components/customer/block/Pizza/index_20220529145401.ts b/.history/components/customer/block/Pizza/index_20220529145401.ts
new file mode 100644
index 0000000..7f18078
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145401.ts
@@ -0,0 +1,2 @@
+export * from './Block';
+export * from './';
\ No newline at end of file
diff --git a/.history/components/customer/block/Pizza/index_20220529145403.ts b/.history/components/customer/block/Pizza/index_20220529145403.ts
new file mode 100644
index 0000000..5bea710
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220529145403.ts
@@ -0,0 +1,2 @@
+export * from './Block';
+export * from './Skeleton';
\ No newline at end of file
diff --git a/.history/components/customer/block/Pizza/index_20220530184305.ts b/.history/components/customer/block/Pizza/index_20220530184305.ts
new file mode 100644
index 0000000..803c932
--- /dev/null
+++ b/.history/components/customer/block/Pizza/index_20220530184305.ts
@@ -0,0 +1,2 @@
+export * from './Pizza';
+export * from './Skeleton';
\ No newline at end of file
diff --git a/.history/components/customer/block/Stock/index_20220517170803.ts b/.history/components/customer/block/Stock/index_20220517170803.ts
new file mode 100644
index 0000000..ef6a80e
--- /dev/null
+++ b/.history/components/customer/block/Stock/index_20220517170803.ts
@@ -0,0 +1 @@
+export * from './Stock';
\ No newline at end of file
diff --git a/.history/components/customer/block/Stock/index_20220530190607.ts b/.history/components/customer/block/Stock/index_20220530190607.ts
new file mode 100644
index 0000000..579c759
--- /dev/null
+++ b/.history/components/customer/block/Stock/index_20220530190607.ts
@@ -0,0 +1,2 @@
+export * from './Stock';
+export * from './Stock';
\ No newline at end of file
diff --git a/.history/components/customer/block/Stock/index_20220530190609.ts b/.history/components/customer/block/Stock/index_20220530190609.ts
new file mode 100644
index 0000000..9939e16
--- /dev/null
+++ b/.history/components/customer/block/Stock/index_20220530190609.ts
@@ -0,0 +1,2 @@
+export * from './Stock';
+export * from './';
\ No newline at end of file
diff --git a/.history/components/customer/block/Stock/index_20220530190610.ts b/.history/components/customer/block/Stock/index_20220530190610.ts
new file mode 100644
index 0000000..711c11d
--- /dev/null
+++ b/.history/components/customer/block/Stock/index_20220530190610.ts
@@ -0,0 +1,2 @@
+export * from './Stock';
+export * from './Skeleton';
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190021.ts b/.history/components/customer/block/index_20220530190021.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/block/index_20220530190112.ts b/.history/components/customer/block/index_20220530190112.ts
new file mode 100644
index 0000000..42151f0
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190112.ts
@@ -0,0 +1 @@
+export 
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190116.ts b/.history/components/customer/block/index_20220530190116.ts
new file mode 100644
index 0000000..c19399d
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190116.ts
@@ -0,0 +1 @@
+export * from
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190117.ts b/.history/components/customer/block/index_20220530190117.ts
new file mode 100644
index 0000000..678f628
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190117.ts
@@ -0,0 +1 @@
+export * from 
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190122.ts b/.history/components/customer/block/index_20220530190122.ts
new file mode 100644
index 0000000..45184d9
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190122.ts
@@ -0,0 +1 @@
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190127.ts b/.history/components/customer/block/index_20220530190127.ts
new file mode 100644
index 0000000..aa52c18
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190127.ts
@@ -0,0 +1 @@
+export * from './Categories'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190129.ts b/.history/components/customer/block/index_20220530190129.ts
new file mode 100644
index 0000000..26ff885
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190129.ts
@@ -0,0 +1 @@
+export * from './Categories/'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190140.ts b/.history/components/customer/block/index_20220530190140.ts
new file mode 100644
index 0000000..aa52c18
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190140.ts
@@ -0,0 +1 @@
+export * from './Categories'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190209.ts b/.history/components/customer/block/index_20220530190209.ts
new file mode 100644
index 0000000..aa52c18
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190209.ts
@@ -0,0 +1 @@
+export * from './Categories'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190213.ts b/.history/components/customer/block/index_20220530190213.ts
new file mode 100644
index 0000000..e80debf
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190213.ts
@@ -0,0 +1,2 @@
+export * from './Categories'
+export * from './Categories'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190216.ts b/.history/components/customer/block/index_20220530190216.ts
new file mode 100644
index 0000000..862ac45
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190216.ts
@@ -0,0 +1,2 @@
+export * from './Categories'
+export * from './Description'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190239.ts b/.history/components/customer/block/index_20220530190239.ts
new file mode 100644
index 0000000..08c270f
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190239.ts
@@ -0,0 +1,3 @@
+export * from './Categories'
+export * from './Description'
+export 
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190245.ts b/.history/components/customer/block/index_20220530190245.ts
new file mode 100644
index 0000000..1d3f079
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190245.ts
@@ -0,0 +1,3 @@
+export * from './Categories'
+export * from './Description'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190246.ts b/.history/components/customer/block/index_20220530190246.ts
new file mode 100644
index 0000000..b13be27
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190246.ts
@@ -0,0 +1,3 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190251.ts b/.history/components/customer/block/index_20220530190251.ts
new file mode 100644
index 0000000..b13be27
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190251.ts
@@ -0,0 +1,3 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190316.ts b/.history/components/customer/block/index_20220530190316.ts
new file mode 100644
index 0000000..b13be27
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190316.ts
@@ -0,0 +1,3 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190322.ts b/.history/components/customer/block/index_20220530190322.ts
new file mode 100644
index 0000000..89bdda6
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190322.ts
@@ -0,0 +1,4 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190325.ts b/.history/components/customer/block/index_20220530190325.ts
new file mode 100644
index 0000000..7c01f25
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190325.ts
@@ -0,0 +1,4 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190333.ts b/.history/components/customer/block/index_20220530190333.ts
new file mode 100644
index 0000000..2725712
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190333.ts
@@ -0,0 +1,5 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190334.ts b/.history/components/customer/block/index_20220530190334.ts
new file mode 100644
index 0000000..dcd7ed4
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190334.ts
@@ -0,0 +1,5 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530190339.ts b/.history/components/customer/block/index_20220530190339.ts
new file mode 100644
index 0000000..dcd7ed4
--- /dev/null
+++ b/.history/components/customer/block/index_20220530190339.ts
@@ -0,0 +1,5 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530192646.ts b/.history/components/customer/block/index_20220530192646.ts
new file mode 100644
index 0000000..93cbcfe
--- /dev/null
+++ b/.history/components/customer/block/index_20220530192646.ts
@@ -0,0 +1,6 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+exp
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530192652.ts b/.history/components/customer/block/index_20220530192652.ts
new file mode 100644
index 0000000..74307b5
--- /dev/null
+++ b/.history/components/customer/block/index_20220530192652.ts
@@ -0,0 +1,6 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530192653.ts b/.history/components/customer/block/index_20220530192653.ts
new file mode 100644
index 0000000..270745b
--- /dev/null
+++ b/.history/components/customer/block/index_20220530192653.ts
@@ -0,0 +1,6 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530193131.ts b/.history/components/customer/block/index_20220530193131.ts
new file mode 100644
index 0000000..4e08c1c
--- /dev/null
+++ b/.history/components/customer/block/index_20220530193131.ts
@@ -0,0 +1,7 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
+export * from './Header'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530193134.ts b/.history/components/customer/block/index_20220530193134.ts
new file mode 100644
index 0000000..b3b5cd9
--- /dev/null
+++ b/.history/components/customer/block/index_20220530193134.ts
@@ -0,0 +1,7 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220530193137.ts b/.history/components/customer/block/index_20220530193137.ts
new file mode 100644
index 0000000..07aefc2
--- /dev/null
+++ b/.history/components/customer/block/index_20220530193137.ts
@@ -0,0 +1,7 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
+export * from './Footer'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220531160959.ts b/.history/components/customer/block/index_20220531160959.ts
new file mode 100644
index 0000000..73c09df
--- /dev/null
+++ b/.history/components/customer/block/index_20220531160959.ts
@@ -0,0 +1,8 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
+export * from './Footer'
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/block/index_20220531161002.ts b/.history/components/customer/block/index_20220531161002.ts
new file mode 100644
index 0000000..dfbf4fb
--- /dev/null
+++ b/.history/components/customer/block/index_20220531161002.ts
@@ -0,0 +1,8 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
+export * from './Footer'
+export * from './DeliveryArea'
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529001940.tsx b/.history/components/customer/containers/Box_20220529001940.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/containers/Box_20220529001947.tsx b/.history/components/customer/containers/Box_20220529001947.tsx
new file mode 100644
index 0000000..618ba67
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529001947.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const BoxScroll: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section className={'box_scroll'} >
+                {children}
+            </section>
+        </div>
+    )
+}
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529001949.tsx b/.history/components/customer/containers/Box_20220529001949.tsx
new file mode 100644
index 0000000..60aa4b1
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529001949.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section className={'box_scroll'} >
+                {children}
+            </section>
+        </div>
+    )
+}
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002027.tsx b/.history/components/customer/containers/Box_20220529002027.tsx
new file mode 100644
index 0000000..318f19f
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002027.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section className={'box_scroll'} >
+                {children}
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002029.tsx b/.history/components/customer/containers/Box_20220529002029.tsx
new file mode 100644
index 0000000..0cefc22
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002029.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section className={'box_scroll'} >
+                {children}
+            </section>
+        </div>
+    )
+}
+<ul className={classNames('vendor-list__ul', styles)}>
+{children}
+</ul>
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002041.tsx b/.history/components/customer/containers/Box_20220529002041.tsx
new file mode 100644
index 0000000..318f19f
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002041.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section className={'box_scroll'} >
+                {children}
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002044.tsx b/.history/components/customer/containers/Box_20220529002044.tsx
new file mode 100644
index 0000000..4b09e6e
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002044.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section >
+                {children}
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002046.tsx b/.history/components/customer/containers/Box_20220529002046.tsx
new file mode 100644
index 0000000..38af532
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002046.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section >
+           <ul className={classNames('vendor-list__ul', styles)}>
+{children}
+</ul>
+                {children}
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002049.tsx b/.history/components/customer/containers/Box_20220529002049.tsx
new file mode 100644
index 0000000..6d8bf3e
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002049.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section >
+           <ul className={classNames('vendor-list__ul', styles)}>
+{children}
+</ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002052.tsx b/.history/components/customer/containers/Box_20220529002052.tsx
new file mode 100644
index 0000000..4b5ad66
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002052.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section >
+           <ul className={classNames('vendor-list__ul', styles)}>
+            {children}
+</ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002054.tsx b/.history/components/customer/containers/Box_20220529002054.tsx
new file mode 100644
index 0000000..17dcb16
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002054.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section >
+           <ul className={classNames('vendor-list__ul', styles)}>
+            {children}
+            </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002057.tsx b/.history/components/customer/containers/Box_20220529002057.tsx
new file mode 100644
index 0000000..27a655f
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002057.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section >
+            <ul className={classNames('vendor-list__ul', styles)}>
+                {children}
+            </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002104.tsx b/.history/components/customer/containers/Box_20220529002104.tsx
new file mode 100644
index 0000000..d280f92
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002104.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={classNames('vendor-list__ul', styles)}>
+                    {children}
+            </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002105.tsx b/.history/components/customer/containers/Box_20220529002105.tsx
new file mode 100644
index 0000000..cbe672a
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002105.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={classNames('vendor-list__ul', styles)}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002128.tsx b/.history/components/customer/containers/Box_20220529002128.tsx
new file mode 100644
index 0000000..b29cd4c
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002128.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={classNames('vendor-list__ul', styles)}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002149.tsx b/.history/components/customer/containers/Box_20220529002149.tsx
new file mode 100644
index 0000000..edcdeef
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002149.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={classNames('vendor-list__ul')}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002157.tsx b/.history/components/customer/containers/Box_20220529002157.tsx
new file mode 100644
index 0000000..a30c7da
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002157.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul')}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002159.tsx b/.history/components/customer/containers/Box_20220529002159.tsx
new file mode 100644
index 0000000..4fb5b9d
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002159.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002202.tsx b/.history/components/customer/containers/Box_20220529002202.tsx
new file mode 100644
index 0000000..c35bf2c
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002202.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/Box_20220529002203.tsx b/.history/components/customer/containers/Box_20220529002203.tsx
new file mode 100644
index 0000000..c35bf2c
--- /dev/null
+++ b/.history/components/customer/containers/Box_20220529002203.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185312.tsx b/.history/components/customer/containers/ContainerInside_20220530185312.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/containers/ContainerInside_20220530185321.tsx b/.history/components/customer/containers/ContainerInside_20220530185321.tsx
new file mode 100644
index 0000000..e12e117
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185321.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185325.tsx b/.history/components/customer/containers/ContainerInside_20220530185325.tsx
new file mode 100644
index 0000000..2c16c35
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185325.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185335.tsx b/.history/components/customer/containers/ContainerInside_20220530185335.tsx
new file mode 100644
index 0000000..aca94ca
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185335.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_box''}>
+            <p className={'container_title'}> {title} </p>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185338.tsx b/.history/components/customer/containers/ContainerInside_20220530185338.tsx
new file mode 100644
index 0000000..c73e816
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185338.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_box''}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185340.tsx b/.history/components/customer/containers/ContainerInside_20220530185340.tsx
new file mode 100644
index 0000000..7734f18
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185340.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_box'}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185451.tsx b/.history/components/customer/containers/ContainerInside_20220530185451.tsx
new file mode 100644
index 0000000..c4b5b1f
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185451.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_box'}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerInside_20220530185454.tsx b/.history/components/customer/containers/ContainerInside_20220530185454.tsx
new file mode 100644
index 0000000..d87493b
--- /dev/null
+++ b/.history/components/customer/containers/ContainerInside_20220530185454.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container_box'}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184604.tsx b/.history/components/customer/containers/ContainerTitle_20220530184604.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184610.tsx b/.history/components/customer/containers/ContainerTitle_20220530184610.tsx
new file mode 100644
index 0000000..21f1439
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184610.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+Container.propTypes = {
+  id: PropTypes.number,
+  title: PropTypes.string,
+  children: PropTypes.element,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184712.tsx b/.history/components/customer/containers/ContainerTitle_20220530184712.tsx
new file mode 100644
index 0000000..fc5bc29
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184712.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
+
+Container.propTypes = {
+  id: PropTypes.number,
+  title: PropTypes.string,
+  children: PropTypes.element,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184723.tsx b/.history/components/customer/containers/ContainerTitle_20220530184723.tsx
new file mode 100644
index 0000000..fe54c77
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184723.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
+
+type Props = {
+  id: PropTypes.number,
+  title: PropTypes.string,
+  children: PropTypes.element,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184730.tsx b/.history/components/customer/containers/ContainerTitle_20220530184730.tsx
new file mode 100644
index 0000000..a3127f1
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184730.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+
+
+type Props = {
+  id: PropTypes.number,
+  title: PropTypes.string,
+  children: PropTypes.element,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184733.tsx b/.history/components/customer/containers/ContainerTitle_20220530184733.tsx
new file mode 100644
index 0000000..fe54c77
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184733.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
+
+type Props = {
+  id: PropTypes.number,
+  title: PropTypes.string,
+  children: PropTypes.element,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184738.tsx b/.history/components/customer/containers/ContainerTitle_20220530184738.tsx
new file mode 100644
index 0000000..2701486
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184738.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
+
+type Props = {
+  id: PropTypes.number,
+  title: PropTypes.string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184740.tsx b/.history/components/customer/containers/ContainerTitle_20220530184740.tsx
new file mode 100644
index 0000000..193204d
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184740.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
+
+type Props = {
+  id: PropTypes.number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184743.tsx b/.history/components/customer/containers/ContainerTitle_20220530184743.tsx
new file mode 100644
index 0000000..b339d68
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184743.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184745.tsx b/.history/components/customer/containers/ContainerTitle_20220530184745.tsx
new file mode 100644
index 0000000..d3604b2
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184745.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184756.tsx b/.history/components/customer/containers/ContainerTitle_20220530184756.tsx
new file mode 100644
index 0000000..22dfe44
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184756.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Container: React.FC<Props> = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184803.tsx b/.history/components/customer/containers/ContainerTitle_20220530184803.tsx
new file mode 100644
index 0000000..d4608cd
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184803.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Container: React.FC<Props> = ({id, title, children}) => {
+    return(
+        <div className={'container_main'} id={id}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184822.tsx b/.history/components/customer/containers/ContainerTitle_20220530184822.tsx
new file mode 100644
index 0000000..ea306d9
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184822.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Container: React.FC<Props> = ({id, title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184827.tsx b/.history/components/customer/containers/ContainerTitle_20220530184827.tsx
new file mode 100644
index 0000000..c571010
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184827.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Container: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
+
+export default Container;
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184831.tsx b/.history/components/customer/containers/ContainerTitle_20220530184831.tsx
new file mode 100644
index 0000000..fb58491
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184831.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Container: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184834.tsx b/.history/components/customer/containers/ContainerTitle_20220530184834.tsx
new file mode 100644
index 0000000..b1fe6d6
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184834.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Container: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
+type Props = {
+  id: number,
+  title: string,
+  children: React.ReactNode,
+};
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184838.tsx b/.history/components/customer/containers/ContainerTitle_20220530184838.tsx
new file mode 100644
index 0000000..2f0b223
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184838.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Container: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184840.tsx b/.history/components/customer/containers/ContainerTitle_20220530184840.tsx
new file mode 100644
index 0000000..e5ef186
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184840.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+type Props = {
+    id: number,
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const Container: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
+
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184842.tsx b/.history/components/customer/containers/ContainerTitle_20220530184842.tsx
new file mode 100644
index 0000000..b6d4f01
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184842.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+    id: number,
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const Container: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184902.tsx b/.history/components/customer/containers/ContainerTitle_20220530184902.tsx
new file mode 100644
index 0000000..5d3f238
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184902.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+    id: number,
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTi: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184906.tsx b/.history/components/customer/containers/ContainerTitle_20220530184906.tsx
new file mode 100644
index 0000000..a75bde3
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184906.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+    id: number,
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530184908.tsx b/.history/components/customer/containers/ContainerTitle_20220530184908.tsx
new file mode 100644
index 0000000..a75bde3
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530184908.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+    id: number,
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530185043.tsx b/.history/components/customer/containers/ContainerTitle_20220530185043.tsx
new file mode 100644
index 0000000..b2d008d
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530185043.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            <>{children}</>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530185109.tsx b/.history/components/customer/containers/ContainerTitle_20220530185109.tsx
new file mode 100644
index 0000000..8bd63ca
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530185109.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            {children}</>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530185110.tsx b/.history/components/customer/containers/ContainerTitle_20220530185110.tsx
new file mode 100644
index 0000000..e12e117
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530185110.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/ContainerTitle_20220530185111.tsx b/.history/components/customer/containers/ContainerTitle_20220530185111.tsx
new file mode 100644
index 0000000..e12e117
--- /dev/null
+++ b/.history/components/customer/containers/ContainerTitle_20220530185111.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220517162153.ts b/.history/components/customer/containers/index_20220517162153.ts
new file mode 100644
index 0000000..4faf4d4
--- /dev/null
+++ b/.history/components/customer/containers/index_20220517162153.ts
@@ -0,0 +1 @@
+export * from './BoxScroll';
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184918.ts b/.history/components/customer/containers/index_20220530184918.ts
new file mode 100644
index 0000000..96fbcb1
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184918.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * form ''
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184919.ts b/.history/components/customer/containers/index_20220530184919.ts
new file mode 100644
index 0000000..79b9235
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184919.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * form './'
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184921.ts b/.history/components/customer/containers/index_20220530184921.ts
new file mode 100644
index 0000000..79b9235
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184921.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * form './'
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184925.ts b/.history/components/customer/containers/index_20220530184925.ts
new file mode 100644
index 0000000..c5ee560
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184925.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184926.ts b/.history/components/customer/containers/index_20220530184926.ts
new file mode 100644
index 0000000..c5ee560
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184926.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * from './'
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184929.ts b/.history/components/customer/containers/index_20220530184929.ts
new file mode 100644
index 0000000..d3a0d0a
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184929.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * from './ContainerTitle'
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530184931.ts b/.history/components/customer/containers/index_20220530184931.ts
new file mode 100644
index 0000000..ca42e44
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530184931.ts
@@ -0,0 +1,2 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530185348.ts b/.history/components/customer/containers/index_20220530185348.ts
new file mode 100644
index 0000000..67a619e
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530185348.ts
@@ -0,0 +1,3 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
+export * from './ContainerTitle';
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530185350.ts b/.history/components/customer/containers/index_20220530185350.ts
new file mode 100644
index 0000000..7a5ef8b
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530185350.ts
@@ -0,0 +1,3 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
+export * from './';
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530185352.ts b/.history/components/customer/containers/index_20220530185352.ts
new file mode 100644
index 0000000..a604112
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530185352.ts
@@ -0,0 +1,3 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
+export * from './ContainerInside';
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530190723.ts b/.history/components/customer/containers/index_20220530190723.ts
new file mode 100644
index 0000000..9d29218
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530190723.ts
@@ -0,0 +1,4 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
+export * from './ContainerInside';
+export 
\ No newline at end of file
diff --git a/.history/components/customer/containers/index_20220530190729.ts b/.history/components/customer/containers/index_20220530190729.ts
new file mode 100644
index 0000000..6964063
--- /dev/null
+++ b/.history/components/customer/containers/index_20220530190729.ts
@@ -0,0 +1,4 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
+export * from './ContainerInside';
+export * from './Box'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220530192634.tsx b/.history/components/customer/pages/index/block/Header/Header_20220530192634.tsx
new file mode 100644
index 0000000..610a747
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220530192634.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618071836.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618071836.tsx
new file mode 100644
index 0000000..1c170b4
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618071836.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+import Link from 'next/link';
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} as={"/cart"} scroll={false} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+              </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618071924.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618071924.tsx
new file mode 100644
index 0000000..37056ba
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618071924.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} as={"/cart"} scroll={false} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+              </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618071936.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618071936.tsx
new file mode 100644
index 0000000..37056ba
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618071936.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} as={"/cart"} scroll={false} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+              </i>
+              <p className={classNames('link entrance_link')}>Корзина</p>
+              </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072003.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072003.tsx
new file mode 100644
index 0000000..5b49d05
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072003.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} as={"/cart"} scroll={false} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072014.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072014.tsx
new file mode 100644
index 0000000..d6788ee
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072014.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} scroll={false} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072027.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072027.tsx
new file mode 100644
index 0000000..5b49d05
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072027.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} as={"/cart"} scroll={false} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072049.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072049.tsx
new file mode 100644
index 0000000..6289b9e
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072049.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href={"/cart"} as={"/cart"} >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072124.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072124.tsx
new file mode 100644
index 0000000..f68163c
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072124.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href="/cart" as="/cart" >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072148.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072148.tsx
new file mode 100644
index 0000000..0a45668
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072148.tsx
@@ -0,0 +1,91 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href="/cart" as="/cart" >
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+                onClick={(e) => updateDataHeader()}
+              />
+            </i>
+            <a className={classNames('link entrance_link')}>Корзина</a>
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072235.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072235.tsx
new file mode 100644
index 0000000..233ad09
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072235.tsx
@@ -0,0 +1,89 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href="/cart" as="/cart" className={classNames('link entrance_link')}>
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+              />
+            </i>Корзина
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072251.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072251.tsx
new file mode 100644
index 0000000..4f3faf3
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072251.tsx
@@ -0,0 +1,84 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <Link href="/cart" as="/cart" className={classNames('link entrance_link')}>
+            ddd
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072326.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072326.tsx
new file mode 100644
index 0000000..51b7105
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072326.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+              />
+            </i>
+          <Link href="/cart" as="/cart" className={classNames('link entrance_link')}>
+            Корзина
+          </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618072406.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618072406.tsx
new file mode 100644
index 0000000..499e80c
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618072406.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+              />
+            </i>
+            <Link href="/cart" as="/cart" className={classNames('link entrance_link')}>
+              Корзина
+            </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618073528.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618073528.tsx
new file mode 100644
index 0000000..caa4e51
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618073528.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+              />
+            </i>
+            <Link href="/?cart" as="/cart" className={classNames('link entrance_link')}>
+              Корзина
+            </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Header/Header_20220618074144.tsx b/.history/components/customer/pages/index/block/Header/Header_20220618074144.tsx
new file mode 100644
index 0000000..e8a2c82
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Header/Header_20220618074144.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+              />
+            </i>
+            <Link href="/?cart=open" as="/cart" className={classNames('link entrance_link')}>
+              Корзина
+            </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/.history/components/customer/pages/index/block/Motto/index_20220529144909.tsx b/.history/components/customer/pages/index/block/Motto/index_20220529144909.tsx
new file mode 100644
index 0000000..f1af6d1
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Motto/index_20220529144909.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Motto/index_20220617165052.tsx b/.history/components/customer/pages/index/block/Motto/index_20220617165052.tsx
new file mode 100644
index 0000000..36688b6
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Motto/index_20220617165052.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220531162100.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220531162100.tsx
new file mode 100644
index 0000000..0bb4113
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220531162100.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Button
+                        styles={'yellow button_size_32'}
+                        align={'button_align_right'}
+                        onClick={() => onClickAdd()}
+                    >Добавить
+                    </Button>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163259.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163259.tsx
new file mode 100644
index 0000000..6c88ede
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163259.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?image=1" as="/1">
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          onClick={() => onClickAdd()}
+                      >Добавить
+                      </Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163359.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163359.tsx
new file mode 100644
index 0000000..6c88ede
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163359.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?image=1" as="/1">
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          onClick={() => onClickAdd()}
+                      >Добавить
+                      </Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163438.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163438.tsx
new file mode 100644
index 0000000..0c3f6dc
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163438.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?image=1" as="/1">
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          
+                      >Добавить
+                      </Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163651.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163651.tsx
new file mode 100644
index 0000000..a2d32a0
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163651.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?pizza=1" as="/1"> </Link>
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          
+                      >Добавить
+                      </Button>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163701.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163701.tsx
new file mode 100644
index 0000000..4f85c60
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163701.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?pizza=1" as="/1">dddd </Link>
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          
+                      >Добавить
+                      </Button>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163739.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163739.tsx
new file mode 100644
index 0000000..bb2e8a8
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163739.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?pizza=1" as="/1">{id} </Link>
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          
+                      >Добавить
+                      </Button>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163758.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163758.tsx
new file mode 100644
index 0000000..7f148c1
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602163758.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?pizza=1" as="/1">sss </Link>
+                      <Button
+                          styles={'yellow button_size_32'}
+                          align={'button_align_right'}
+                          
+                      >Добавить
+                      </Button>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164050.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164050.tsx
new file mode 100644
index 0000000..bcee36b
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164050.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?pizza=1" as="/1">
+                      <button
+                          className={'yellow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164112.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164112.tsx
new file mode 100644
index 0000000..84911e6
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164112.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/?pizza=1">
+                      <button
+                          className={'yellow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164129.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164129.tsx
new file mode 100644
index 0000000..3113e9d
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164129.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/1" as="/1">
+                      <button
+                          className={'yellow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164142.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164142.tsx
new file mode 100644
index 0000000..2d9b1a5
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164142.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href="/1">
+                      <button
+                          className={'yellow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164241.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164241.tsx
new file mode 100644
index 0000000..eb335fe
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164241.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/"+id}>
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                    
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164501.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164501.tsx
new file mode 100644
index 0000000..3036795
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602164501.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/"+id}>
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602165405.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602165405.tsx
new file mode 100644
index 0000000..2d508ce
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602165405.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/"+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220602165450.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602165450.tsx
new file mode 100644
index 0000000..7e7f45d
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220602165450.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza"+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220603173339.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220603173339.tsx
new file mode 100644
index 0000000..27d5dbc
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220603173339.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082241.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082241.tsx
new file mode 100644
index 0000000..4d6982b
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082241.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"javascript: /?pizza="+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082309.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082309.tsx
new file mode 100644
index 0000000..8816018
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082309.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"javascript: // ?pizza="+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082325.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082325.tsx
new file mode 100644
index 0000000..27d5dbc
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082325.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082359.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082359.tsx
new file mode 100644
index 0000000..27d5dbc
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082359.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082546.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082546.tsx
new file mode 100644
index 0000000..eccda0b
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604082546.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}>
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131839.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131839.tsx
new file mode 100644
index 0000000..d6ee4e5
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131839.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}>
+                      <button
+                          className={classNames('yelow button_size_32')}
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131854.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131854.tsx
new file mode 100644
index 0000000..079851d
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131854.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  className={classNames('yelow button_size_32')}>
+                      <button
+                         
+                      >Добавить
+                      </button>
+                      </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131916.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131916.tsx
new file mode 100644
index 0000000..861ad84
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604131916.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  className={classNames('yelow button_size_32')}>
+                      Добавить
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132101.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132101.tsx
new file mode 100644
index 0000000..c09f344
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132101.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <a className={classNames('yelow button_size_32')}>Добавить</a>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132104.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132104.tsx
new file mode 100644
index 0000000..c09f344
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132104.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <a className={classNames('yelow button_size_32')}>Добавить</a>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132121.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132121.tsx
new file mode 100644
index 0000000..02a8621
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132121.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <button className={classNames('yelow button_size_32')}>Добавить</button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132243.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132243.tsx
new file mode 100644
index 0000000..1938900
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604132243.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <Button styles={'yelow button_size_32'} align={'button_align_center'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604154741.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604154741.tsx
new file mode 100644
index 0000000..d6876de
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604154741.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className='vendor-item__link'>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <Button styles={'yellow button_size_32'} align={'button_align_center'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220604155111.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604155111.tsx
new file mode 100644
index 0000000..c97df1b
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220604155111.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <Button styles={'yellow button_size_32'} align={'button_align_center'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220615035530.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220615035530.tsx
new file mode 100644
index 0000000..622be66
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220615035530.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img_trad}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {heft_trad} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <Button styles={'yellow button_size_32'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220617160543.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220617160543.tsx
new file mode 100644
index 0000000..03890a9
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220617160543.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <Button styles={'yellow button_size_32'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220617164057.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220617164057.tsx
new file mode 100644
index 0000000..b3296b2
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220617164057.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false}  >
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220618073853.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618073853.tsx
new file mode 100644
index 0000000..3556e21
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618073853.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+          <li className={classNames("vendor-item product_card")}>
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                    <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                    </Link>
+                </span>
+            </span>
+        </li>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220618174843.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618174843.tsx
new file mode 100644
index 0000000..171b22e
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618174843.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("vendor-item product_card")} >
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220618175816.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618175816.tsx
new file mode 100644
index 0000000..13050bc
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618175816.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item product_card")} >
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220618175927.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618175927.tsx
new file mode 100644
index 0000000..4f67381
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220618175927.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className=''>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619065529.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619065529.tsx
new file mode 100644
index 0000000..2d01493
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619065529.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070446.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070446.tsx
new file mode 100644
index 0000000..f5db8e5
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070446.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                {title}
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070555.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070555.tsx
new file mode 100644
index 0000000..ac3fdad
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070555.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={''} >
+                {title}
+                <p className={'product_card_text'}>{description}</p>
+                <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070626.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070626.tsx
new file mode 100644
index 0000000..b313c55
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070626.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                {title}
+                <p className={'product_card_text'}>{description}</p>
+            </span>
+            <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070647.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070647.tsx
new file mode 100644
index 0000000..61f4b0e
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070647.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+            </span>
+            <span className={'product_card_video'}>
+                    <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+                </span>
+                <span className={'product_card_footer'}>
+                    <p className={'product_card_price'}>от {price[0]} руб</p>
+                      <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+                </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070938.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070938.tsx
new file mode 100644
index 0000000..6147041
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619070938.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+            </span>
+            <span className={'footer_box'}>
+              <span className={'product_card_video'}>
+                <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+              </span>
+              <span className={'product_card_footer'}>
+                <p className={'product_card_price'}>от {price[0]} руб</p>
+                  <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+              </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/Pizza_20220619071011.tsx b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619071011.tsx
new file mode 100644
index 0000000..a82db95
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/Pizza_20220619071011.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+            </span>
+            <span className={'product_card_video'}>
+                <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+              </span>
+            <span className={'footer_box'}>
+              <span className={'product_card_footer'}>
+                <p className={'product_card_price'}>от {price[0]} руб</p>
+                  <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+              </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175418.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175418.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175436.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175436.scss
new file mode 100644
index 0000000..0f918ce
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175436.scss
@@ -0,0 +1,92 @@
+.product_card{
+    height: 630px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+}
+
+.product_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .vendor-item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .vendor-item:hover .vendor-item__link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .vendor-item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .vendor-item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .vendor-item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .vendor-item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .vendor-item {
+    transition: 0.2s;
+  }
+  .vendor-item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .vendor-item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175756.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175756.scss
new file mode 100644
index 0000000..a770b9e
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175756.scss
@@ -0,0 +1,92 @@
+.product_card{
+    height: 630px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+}
+
+.product_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175914.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175914.scss
new file mode 100644
index 0000000..04cc3fa
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175914.scss
@@ -0,0 +1,92 @@
+.pizza_card{
+    height: 630px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+}
+
+.product_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175918.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175918.scss
new file mode 100644
index 0000000..7ee0bce
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175918.scss
@@ -0,0 +1,92 @@
+.pizza_card{
+    height: 630px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175956.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175956.scss
new file mode 100644
index 0000000..dec2cff
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618175956.scss
@@ -0,0 +1,101 @@
+.pizza_card{
+    height: 630px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+    
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+    width: 292px;
+    margin-right: 37.3333px;
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618180147.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618180147.scss
new file mode 100644
index 0000000..e2fcc43
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618180147.scss
@@ -0,0 +1,100 @@
+.pizza_card{
+    height: 630px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+  
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618201842.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618201842.scss
new file mode 100644
index 0000000..1c1fb9f
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618201842.scss
@@ -0,0 +1,98 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220618202120.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618202120.scss
new file mode 100644
index 0000000..1c1fb9f
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220618202120.scss
@@ -0,0 +1,98 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065308.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065308.scss
new file mode 100644
index 0000000..89cba97
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065308.scss
@@ -0,0 +1,99 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+    line-height: 20px;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065336.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065336.scss
new file mode 100644
index 0000000..1c1fb9f
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065336.scss
@@ -0,0 +1,98 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065624.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065624.scss
new file mode 100644
index 0000000..e02934d
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065624.scss
@@ -0,0 +1,108 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065659.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065659.scss
new file mode 100644
index 0000000..ea84cac
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065659.scss
@@ -0,0 +1,113 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065826.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065826.scss
new file mode 100644
index 0000000..8fb1a2a
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065826.scss
@@ -0,0 +1,121 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      margin: 8px 0px;
+      color: rgb(0, 0, 0);
+      font-size: 20px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065923.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065923.scss
new file mode 100644
index 0000000..af34960
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619065923.scss
@@ -0,0 +1,119 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070505.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070505.scss
new file mode 100644
index 0000000..0adee94
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070505.scss
@@ -0,0 +1,120 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070945.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070945.scss
new file mode 100644
index 0000000..a146c79
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070945.scss
@@ -0,0 +1,124 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070954.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070954.scss
new file mode 100644
index 0000000..7436056
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619070954.scss
@@ -0,0 +1,125 @@
+.pizza_card{
+    height: 630px;
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+.product_card_box{
+    /*width: 256px; */
+    text-align: left;
+}
+
+.product_card_footer{
+    display: table;
+    width: 100%;
+}
+
+.product_card_price{
+    float: left;
+    position: static;
+    display: flex;
+    margin: 10px 10px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.product_card_video{
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071441.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071441.scss
new file mode 100644
index 0000000..60feb8f
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071441.scss
@@ -0,0 +1,124 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071456.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071456.scss
new file mode 100644
index 0000000..570bb86
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071456.scss
@@ -0,0 +1,121 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_card:hover {
+ 
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071504.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071504.scss
new file mode 100644
index 0000000..60feb8f
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071504.scss
@@ -0,0 +1,124 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071523.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071523.scss
new file mode 100644
index 0000000..799bbf9
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071523.scss
@@ -0,0 +1,123 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+   
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071547.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071547.scss
new file mode 100644
index 0000000..0acbcaa
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071547.scss
@@ -0,0 +1,124 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .pizza_item:hover {
+    margin-top: -4px;
+    
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071609.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071609.scss
new file mode 100644
index 0000000..5f07ed8
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071609.scss
@@ -0,0 +1,124 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+  .img:hover {
+    margin-top: -4px;
+    margin-bottom: 24px;
+  }
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071630.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071630.scss
new file mode 100644
index 0000000..7604510
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071630.scss
@@ -0,0 +1,125 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+    
+    .pizza_item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071638.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071638.scss
new file mode 100644
index 0000000..5c3d418
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071638.scss
@@ -0,0 +1,126 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+  margin-top: -4px;
+  margin-bottom: 24px;
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071656.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071656.scss
new file mode 100644
index 0000000..cbeb252
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071656.scss
@@ -0,0 +1,126 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+  margin-top: -4px;
+  margin-bottom: 4px;
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071710.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071710.scss
new file mode 100644
index 0000000..0ba404c
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619071710.scss
@@ -0,0 +1,126 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619074534.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619074534.scss
new file mode 100644
index 0000000..db94d4e
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619074534.scss
@@ -0,0 +1,131 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+      
+      h3{
+        margin-bottom: 5px;
+      }
+    }
+
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075135.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075135.scss
new file mode 100644
index 0000000..cb04b6b
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075135.scss
@@ -0,0 +1,131 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+      display: contents;
+      h3{
+        flex: auto;
+      }
+    }
+
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075359.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075359.scss
new file mode 100644
index 0000000..a9b55de
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075359.scss
@@ -0,0 +1,132 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+      display: contents;
+      .product_card_text{
+        flex: auto;
+      }
+
+    }
+
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075421.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075421.scss
new file mode 100644
index 0000000..51cad10
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075421.scss
@@ -0,0 +1,135 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      display: flex;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+      display: contents;
+      h3{
+        margin-bottom: 5px;
+      }
+      .product_card_text{
+        flex: auto;
+      }
+
+    }
+
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075650.scss b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075650.scss
new file mode 100644
index 0000000..cda2198
--- /dev/null
+++ b/.history/components/customer/pages/index/block/Pizza/styles/index_20220619075650.scss
@@ -0,0 +1,134 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+      display: contents;
+      h3{
+        margin-bottom: 5px;
+      }
+      .product_card_text{
+        flex: auto;
+      }
+
+    }
+
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065612.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065612.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065707.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065707.tsx
new file mode 100644
index 0000000..45d1517
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065707.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        <div className={'card_additionally_box'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+        </div>
+    )
+}
+
+export default CardAdditionally;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065729.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065729.tsx
new file mode 100644
index 0000000..52bd731
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065729.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        <div className={'card_additionally_box'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618064604.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618064604.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx
new file mode 100644
index 0000000..9ef2bf6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx
@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className = {'card_basket_product_img'}>
+                <Image
+                    className = {'pictureText_img'}
+                    src={src}
+                    alt={alt}
+                    width={63}
+                    height={60}
+                />
+            </div>
+            <div className={'card_basket_product_box_title'}>
+                <p className={'card_basket_product_title'}>{title_name}</p>
+                <p className={'card_basket_product_size'}>{title_size}</p>
+            </div>
+
+           <div className={'card_basket_product_sale_box_button'}>
+                <button className='card_basket_product_button'>-</button>
+                <p className='card_basket_product_count'>{countProduct}</p>
+                <button className='card_basket_product_button'>+</button>
+           </div>
+
+           <div className={'card_basket_product_sale_box_price'}>
+                <p className='card_basket_product_price'>{price} ₽</p>
+           </div>
+        </div>
+    )
+}
+
+export default CardBasketProduct;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx
new file mode 100644
index 0000000..0c69714
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className = {'card_basket_product_img'}>
+                <Image
+                    className = {'pictureText_img'}
+                    src={src}
+                    alt={alt}
+                    width={63}
+                    height={60}
+                />
+            </div>
+            <div className={'card_basket_product_box_title'}>
+                <p className={'card_basket_product_title'}>{title_name}</p>
+                <p className={'card_basket_product_size'}>{title_size}</p>
+            </div>
+
+           <div className={'card_basket_product_sale_box_button'}>
+                <button className='card_basket_product_button'>-</button>
+                <p className='card_basket_product_count'>{countProduct}</p>
+                <button className='card_basket_product_button'>+</button>
+           </div>
+
+           <div className={'card_basket_product_sale_box_price'}>
+                <p className='card_basket_product_price'>{price} ₽</p>
+           </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083126.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083126.tsx
new file mode 100644
index 0000000..f455c14
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083126.tsx
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'product_main'}>
+            <div className = {'product_img'}>
+                <Image
+                    className = {'pictureText_img'}
+                    src={src}
+                    alt={alt}
+                    width={63}
+                    height={60}
+                />
+            </div>
+            <div className={'card_basket_product_box_title'}>
+                <p className={'card_basket_product_title'}>{title_name}</p>
+                <p className={'card_basket_product_size'}>{title_size}</p>
+            </div>
+
+           <div className={'card_basket_product_sale_box_button'}>
+                <button className='card_basket_product_button'>-</button>
+                <p className='card_basket_product_count'>{countProduct}</p>
+                <button className='card_basket_product_button'>+</button>
+           </div>
+
+           <div className={'card_basket_product_sale_box_price'}>
+                <p className='card_basket_product_price'>{price} ₽</p>
+           </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx
new file mode 100644
index 0000000..0c69714
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className = {'card_basket_product_img'}>
+                <Image
+                    className = {'pictureText_img'}
+                    src={src}
+                    alt={alt}
+                    width={63}
+                    height={60}
+                />
+            </div>
+            <div className={'card_basket_product_box_title'}>
+                <p className={'card_basket_product_title'}>{title_name}</p>
+                <p className={'card_basket_product_size'}>{title_size}</p>
+            </div>
+
+           <div className={'card_basket_product_sale_box_button'}>
+                <button className='card_basket_product_button'>-</button>
+                <p className='card_basket_product_count'>{countProduct}</p>
+                <button className='card_basket_product_button'>+</button>
+           </div>
+
+           <div className={'card_basket_product_sale_box_price'}>
+                <p className='card_basket_product_price'>{price} ₽</p>
+           </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618063330.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618063330.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618063620.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618063620.tsx
new file mode 100644
index 0000000..7fd133b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618063620.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618065345.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618065345.tsx
new file mode 100644
index 0000000..b1d19ad
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618065345.tsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct } from './'
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+                    <div className='modal_basket_body_additionally'>
+                        <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                        <ContainerBoxHorizontal>
+                            {additionally.map((name, count) =>
+                                <CardAdditionally key={count}  src={name.src}/>)
+                            }
+                        </ContainerBoxHorizontal>
+                    </div>
+                </div>
+                <div className='modal_basket_footer'>
+                    <div className='modal_basket_promo_code_box'>
+                        <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                        <button className='modal_basket_button' type="submit">Применить</button>
+                    </div>
+                    <div className='modal_basket_check'>
+                        <div className='modal_basket_check_box'>
+                            <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                        </div>
+                        <div className='modal_basket_check_box'>
+                            <p >{quantityGoods} товар(а) </p>
+                            <p className='modal_basket_check_text'>{sum} ₽</p>
+                        </div>
+                    </div>
+                    <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={() => props.updateData({status:false, id:0})}>Оформить заказ {sum} ₽</Button>
+                </div>
+
+
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618065416.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618065416.tsx
new file mode 100644
index 0000000..0ff2eaf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618065416.tsx
@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct } from './'
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+                    <div className='modal_basket_body_additionally'>
+                        <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                        <ContainerBoxHorizontal>
+                            {additionally.map((name, count) =>
+                                <CardAdditionally key={count}  src={name.src}/>)
+                            }
+                        </ContainerBoxHorizontal>
+                    </div>
+                </div>
+                <div className='modal_basket_footer'>
+                    <div className='modal_basket_promo_code_box'>
+                        <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                        <button className='modal_basket_button' type="submit">Применить</button>
+                    </div>
+                    <div className='modal_basket_check'>
+                        <div className='modal_basket_check_box'>
+                            <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                        </div>
+                        <div className='modal_basket_check_box'>
+                            <p >{quantityGoods} товар(а) </p>
+                            <p className='modal_basket_check_text'>{sum} ₽</p>
+                        </div>
+                    </div>
+                    <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={() => props.updateData({status:false, id:0})}>Оформить заказ {sum} ₽</Button>
+                </div>
+
+
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618065525.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618065525.tsx
new file mode 100644
index 0000000..dcc0443
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618065525.tsx
@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+                    <div className='modal_basket_body_additionally'>
+                        <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                        <BoxScroll>
+                            {additionally.map((name, count) =>
+                                <CardAdditionally key={count}  src={name.src}/>)
+                            }
+                        </BoxScroll>
+                    </div>
+                </div>
+                <div className='modal_basket_footer'>
+                    <div className='modal_basket_promo_code_box'>
+                        <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                        <button className='modal_basket_button' type="submit">Применить</button>
+                    </div>
+                    <div className='modal_basket_check'>
+                        <div className='modal_basket_check_box'>
+                            <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                        </div>
+                        <div className='modal_basket_check_box'>
+                            <p >{quantityGoods} товар(а) </p>
+                            <p className='modal_basket_check_text'>{sum} ₽</p>
+                        </div>
+                    </div>
+                    <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={() => props.updateData({status:false, id:0})}>Оформить заказ {sum} ₽</Button>
+                </div>
+
+
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618065858.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618065858.tsx
new file mode 100644
index 0000000..8b284f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618065858.tsx
@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+
+    const [additionally, setAdditionally] = useState([{src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},]);
+
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+                    <div className='modal_basket_body_additionally'>
+                        <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                        <BoxScroll>
+                            {additionally.map((name, count) =>
+                                <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                            }
+                        </BoxScroll>
+                    </div>
+                </div>
+                <div className='modal_basket_footer'>
+                    <div className='modal_basket_promo_code_box'>
+                        <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                        <button className='modal_basket_button' type="submit">Применить</button>
+                    </div>
+                    <div className='modal_basket_check'>
+                        <div className='modal_basket_check_box'>
+                            <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                        </div>
+                        <div className='modal_basket_check_box'>
+                            <p >{quantityGoods} товар(а) </p>
+                            <p className='modal_basket_check_text'>{sum} ₽</p>
+                        </div>
+                    </div>
+                    <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={() => props.updateData({status:false, id:0})}>Оформить заказ {sum} ₽</Button>
+                </div>
+
+
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618065924.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618065924.tsx
new file mode 100644
index 0000000..2283c95
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618065924.tsx
@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+
+    const [additionally, setAdditionally] = useState([{src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+                    <div className='modal_basket_body_additionally'>
+                        <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                        <BoxScroll>
+                            {additionally.map((name, count) =>
+                                <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                            }
+                        </BoxScroll>
+                    </div>
+                </div>
+                <div className='modal_basket_footer'>
+                    <div className='modal_basket_promo_code_box'>
+                        <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                        <button className='modal_basket_button' type="submit">Применить</button>
+                    </div>
+                    <div className='modal_basket_check'>
+                        <div className='modal_basket_check_box'>
+                            <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                        </div>
+                        <div className='modal_basket_check_box'>
+                            <p >{quantityGoods} товар(а) </p>
+                            <p className='modal_basket_check_text'>{sum} ₽</p>
+                        </div>
+                    </div>
+                    <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={() => props.updateData({status:false, id:0})}>Оформить заказ {sum} ₽</Button>
+                </div>
+
+
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618071114.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618071114.tsx
new file mode 100644
index 0000000..f478320
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618071114.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='modal_basket_body_additionally'>
+                <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='modal_basket_footer'>
+            <div className='modal_basket_promo_code_box'>
+                <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='modal_basket_button' type="submit">Применить</button>
+            </div>
+            <div className='modal_basket_check'>
+                <div className='modal_basket_check_box'>
+                    <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                </div>
+                <div className='modal_basket_check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='modal_basket_check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={' button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618073833.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618073833.tsx
new file mode 100644
index 0000000..4cc254e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618073833.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='modal_basket_body_additionally'>
+                <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='modal_basket_footer'>
+            <div className='modal_basket_promo_code_box'>
+                <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='modal_basket_button' type="submit">Применить</button>
+            </div>
+            <div className='modal_basket_check'>
+                <div className='modal_basket_check_box'>
+                    <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                </div>
+                <div className='modal_basket_check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='modal_basket_check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={' button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618081203.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618081203.tsx
new file mode 100644
index 0000000..4a2d17d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618081203.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='modal_basket_header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='modal_basket_body'>
+            <div className='modal_basket_body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='modal_basket_body_additionally'>
+                <p className='modal_basket_body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='modal_basket_footer'>
+            <div className='modal_basket_promo_code_box'>
+                <input className='modal_basket_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='modal_basket_button' type="submit">Применить</button>
+            </div>
+            <div className='modal_basket_check'>
+                <div className='modal_basket_check_box'>
+                    <p >Доставка </p> <p className='modal_basket_check_text'>{delivery} ₽</p>
+                </div>
+                <div className='modal_basket_check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='modal_basket_check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={' button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618082130.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618082130.tsx
new file mode 100644
index 0000000..c59f5d7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618082130.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618083539.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618083539.tsx
new file mode 100644
index 0000000..9326159
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618083539.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618084207.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618084207.tsx
new file mode 100644
index 0000000..7d8b8db
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618084207.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618084215.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618084215.tsx
new file mode 100644
index 0000000..b5ebb49
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618084215.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618105221.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618105221.tsx
new file mode 100644
index 0000000..5561a9d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618105221.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg'}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618105351.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618105351.tsx
new file mode 100644
index 0000000..1305a21
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618105351.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg'}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618105650.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618105650.tsx
new file mode 100644
index 0000000..2742304
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618105650.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv'}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618105704.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618105704.tsx
new file mode 100644
index 0000000..6c237e4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618105704.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', price:'345'}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618105753.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618105753.tsx
new file mode 100644
index 0000000..a8935f9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618105753.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618111039.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618111039.tsx
new file mode 100644
index 0000000..dca7719
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618111039.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618145445.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618145445.tsx
new file mode 100644
index 0000000..762db74
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618145445.tsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220618145731.tsx b/.history/components/customer/pages/index/modals/cart/content_20220618145731.tsx
new file mode 100644
index 0000000..dca7719
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220618145731.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/index_20220618063258.ts b/.history/components/customer/pages/index/modals/cart/index_20220618063258.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/index_20220618063608.ts b/.history/components/customer/pages/index/modals/cart/index_20220618063608.ts
new file mode 100644
index 0000000..e40c8f0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/index_20220618063608.ts
@@ -0,0 +1,2 @@
+export * from './content'
+export * from './pizzaCart'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/index_20220618065325.ts b/.history/components/customer/pages/index/modals/cart/index_20220618065325.ts
new file mode 100644
index 0000000..c1b680a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/index_20220618065325.ts
@@ -0,0 +1,3 @@
+export * from './content'
+export * from './pizzaCart'
+export * from './cardBasketProduct'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/index_20220618065751.ts b/.history/components/customer/pages/index/modals/cart/index_20220618065751.ts
new file mode 100644
index 0000000..509e878
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/index_20220618065751.ts
@@ -0,0 +1,4 @@
+export * from './content'
+export * from './pizzaCart'
+export * from './cardBasketProduct'
+export * from './cardAdditionally'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618063313.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618063313.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618063622.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618063622.tsx
new file mode 100644
index 0000000..b086a57
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618063622.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+//import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {
+        //pizza
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618071220.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618071220.tsx
new file mode 100644
index 0000000..cd8db16
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618071220.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {
+        <PizzaModalsContent id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618073843.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618073843.tsx
new file mode 100644
index 0000000..dcbf0d9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618073843.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {
+        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618082309.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618082309.tsx
new file mode 100644
index 0000000..c5616c7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618082309.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'basket'} position={'position_product'}>
+      {
+        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618104446.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618104446.tsx
new file mode 100644
index 0000000..2ae5cac
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618104446.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'basket'} position={''}>
+      {
+        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618143512.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618143512.tsx
new file mode 100644
index 0000000..1e114fc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220618143512.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'cart'} position={''}>
+      {
+        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/index_20220601090126.ts b/.history/components/customer/pages/index/modals/index_20220601090126.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/index_20220601090138.ts b/.history/components/customer/pages/index/modals/index_20220601090138.ts
new file mode 100644
index 0000000..9099abf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/index_20220601090138.ts
@@ -0,0 +1 @@
+export * from './pizza'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/index_20220618073850.ts b/.history/components/customer/pages/index/modals/index_20220618073850.ts
new file mode 100644
index 0000000..62bb833
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/index_20220618073850.ts
@@ -0,0 +1,2 @@
+export * from './pizza'
+export * from './cart'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616124308.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616124308.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616124912.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616124912.tsx
new file mode 100644
index 0000000..5461acf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616124912.tsx
@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { BoxScroll } from '../../../../../../components/customer/containers';
+
+var checkNow = ['none','none','none','none','none','none','none','none'];
+
+const Ingredients = ({...props}) => {
+    const [ingMass, setIngMass] = useState([{}]);
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+       // console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        const getData = async () => {
+          //const response = await fetch(`https://swapi.dev/api/people/${props.id}/`);
+          //const newData = await response.json();
+         // const response = await mass;
+         // const newData = await mass.json();
+         setIngMass([{name:'onion', title:'Лук', price:6},
+                     {name:'tomato', title:'Томаты', price:16},
+                     {name:'cheese', title:'Сыр', price:20},
+                     {name:'mushroom', title:'Грибы', price:10},
+                     {name:'bacon', title:'Бекон', price:30},
+                     {name:'pineapple', title:'Ананас', price:30},
+                     {name:'pickles', title:'Огурчик', price:6},
+                     {name:'jalapeno', title:'Халапенью', price:6}]);
+        };
+        getData();
+        setCheck(['none','none','none','none','none','none','none','none']);
+        props.updateData({ingredientsSum:0});
+      }, [props.id]);
+
+    return(
+        <BoxScroll>
+            { ingMass.length ? ingMass.map((rows, count) =>(
+                <li className='ingredients_box' key={count}>
+                    <div className={'ingredients_text_box' + ' ' + check[count]}>
+                        <div className={'ingredients_img' + ' ' + rows.name}> </div>
+                        <p className='ingredients_name'>{rows.title}</p>
+                        <p className='ingredients_price'>{rows.price} p</p>
+                        <button type="submit"
+                            className={'ingredients_button'}
+                            name={rows.name}
+                            id={count}
+                            value={check[count]}
+                            onClick={(e) => ingredientsAdd(e)}>{check[count]==='none'? '+' : '-'}</button>
+                    </div>
+                </li>)
+            ) : '...'
+            }
+        </BoxScroll>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616131650.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616131650.tsx
new file mode 100644
index 0000000..51253d8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616131650.tsx
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+var checkNow = ['none','none','none','none','none','none','none','none'];
+
+const Ingredients = ({...props}) => {
+    const [ingMass, setIngMass] = useState([{}]);
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        if (check[e.target.id]==='none') {
+            props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        const getData = async () => {
+         setIngMass([{name:'onion', title:'Лук', price:6},
+                     {name:'tomato', title:'Томаты', price:16},
+                     {name:'cheese', title:'Сыр', price:20},
+                     {name:'mushroom', title:'Грибы', price:10},
+                     {name:'bacon', title:'Бекон', price:30},
+                     {name:'pineapple', title:'Ананас', price:30},
+                     {name:'pickles', title:'Огурчик', price:6},
+                     {name:'jalapeno', title:'Халапенью', price:6}]);
+        };
+        getData();
+        setCheck(['none','none','none','none','none','none','none','none']);
+        props.updateData({ingredientsSum:0});
+      }, [props.id]);
+
+    return(
+        <li className='ingredients_box' key={count}>
+            <div className={'ingredients_text_box' + ' ' + check[count]}>
+                <div className={'ingredients_img' + ' ' + rows.name}> </div>
+                <p className='ingredients_name'>{rows.title}</p>
+                <p className='ingredients_price'>{rows.price} p</p>
+                <button type="submit"
+                    className={'ingredients_button'}
+                    name={rows.name}
+                    id={count}
+                    value={check[count]}
+                    onClick={(e) => ingredientsAdd(e)}>{check[count]==='none'? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616132920.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616132920.tsx
new file mode 100644
index 0000000..95910b2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616132920.tsx
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+
+
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box')}>
+                <div className={classNames('ingredients_img' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button type="submit"
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616133019.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616133019.tsx
new file mode 100644
index 0000000..1cec692
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616133019.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box')}>
+                <div className={classNames('ingredients_img' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button type="submit"
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140058.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140058.tsx
new file mode 100644
index 0000000..7473a59
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140058.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button type="submit"
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140200.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140200.tsx
new file mode 100644
index 0000000..b14362f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140200.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box none')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button type="submit"
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140525.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140525.tsx
new file mode 100644
index 0000000..f38f6ea
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140525.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box none')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140611.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140611.tsx
new file mode 100644
index 0000000..763dc78
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140611.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box none')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick(e.target.value)}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140621.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140621.tsx
new file mode 100644
index 0000000..f38f6ea
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616140621.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box none')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143834.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143834.tsx
new file mode 100644
index 0000000..f2b5f9c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143834.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box none')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button yellow')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143901.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143901.tsx
new file mode 100644
index 0000000..206783a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143901.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box none')}>
+                <div className={classNames('ingredients_img yellow' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143907.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143907.tsx
new file mode 100644
index 0000000..539a1f0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616143907.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box yellow')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144008.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144008.tsx
new file mode 100644
index 0000000..6da6efc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144008.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + check === 'none' ? 'none' : 'yellow')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144031.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144031.tsx
new file mode 100644
index 0000000..6da6efc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144031.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + check === 'none' ? 'none' : 'yellow')}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144105.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144105.tsx
new file mode 100644
index 0000000..41c62f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144105.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144115.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144115.tsx
new file mode 100644
index 0000000..ee90baf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144115.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check !== 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144124.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144124.tsx
new file mode 100644
index 0000000..41c62f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144124.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144253.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144253.tsx
new file mode 100644
index 0000000..7bdf3fc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144253.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string[];
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144327.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144327.tsx
new file mode 100644
index 0000000..41c62f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616144327.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onclick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616145033.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616145033.tsx
new file mode 100644
index 0000000..01fb7ad
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616145033.tsx
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616145114.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616145114.tsx
new file mode 100644
index 0000000..a502411
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616145114.tsx
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>{check === 'none' ? '+' : '-'}</button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192514.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192514.tsx
new file mode 100644
index 0000000..36d1661
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192514.tsx
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}><p>{check === 'none' ? '+' : '-'}</p></button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192554.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192554.tsx
new file mode 100644
index 0000000..f0e91fc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192554.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        <p className='buttonCheck'>{check === 'none' ? '+' : '-'}</p>
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192624.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192624.tsx
new file mode 100644
index 0000000..f0e91fc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192624.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        <p className='buttonCheck'>{check === 'none' ? '+' : '-'}</p>
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192702.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192702.tsx
new file mode 100644
index 0000000..f0e91fc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616192702.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        <p className='buttonCheck'>{check === 'none' ? '+' : '-'}</p>
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616215531.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616215531.tsx
new file mode 100644
index 0000000..93afbcd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616215531.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button minus'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        <p className='buttonCheck'>{check === 'none' ? '+' : '-'}</p>
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220344.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220344.tsx
new file mode 100644
index 0000000..9cb8763
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220344.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button minus'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        <p className='minus'>{check === 'none' ? '+' : '-'}</p>
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220402.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220402.tsx
new file mode 100644
index 0000000..a9666f3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220402.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={'ingredients_button minus'}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220442.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220442.tsx
new file mode 100644
index 0000000..0dd61df
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220442.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}>
+                        
+                    </button>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220540.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220540.tsx
new file mode 100644
index 0000000..577cbdb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220540.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}/>
+                        
+                  
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220611.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220611.tsx
new file mode 100644
index 0000000..f94f58f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220611.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button' + ' minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}/>
+                        
+                  
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220618.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220618.tsx
new file mode 100644
index 0000000..fd7df71
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220618.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button ' + ' minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}/>
+                        
+                  
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220713.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220713.tsx
new file mode 100644
index 0000000..577cbdb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220713.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}/>
+                        
+                  
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220727.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220727.tsx
new file mode 100644
index 0000000..577cbdb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220727.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}/>
+                        
+                  
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220744.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220744.tsx
new file mode 100644
index 0000000..f3ca931
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220616220744.tsx
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onClick={(e) => onClick(e)}/>
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Ingredients_20220617085940.tsx b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220617085940.tsx
new file mode 100644
index 0000000..10c352b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Ingredients_20220617085940.tsx
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+type PizzaProps = {
+    name: string;
+    title: string;
+    price: number;
+    id: string;
+    check: string;
+    onClick: () => void;
+  };
+
+export const Ingredients: React.FC<PizzaProps> = ({
+    name,
+    title,
+    price,
+    id,
+    check,
+    onClick
+    }) => {
+    return(
+        <li className='ingredients_box'>
+            <div className={classNames('ingredients_text_box ' + (check === 'none' ? 'none' : 'yellow'))}>
+                <div className={classNames('ingredients_img ' + name)}> </div>
+                <p className='ingredients_name'>{title}</p>
+                <p className='ingredients_price'>{price} p</p>
+                <button
+                    className={classNames('ingredients_button minus')}
+                    name={name}
+                    id={id}
+                    value={check}
+                    onChange={e => onClick(e.currentTarget.id)}
+                    />
+            </div>
+        </li>
+    )
+}
+
+export default Ingredients;
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618145856.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618145856.scss
new file mode 100644
index 0000000..2814638
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618145856.scss
@@ -0,0 +1,90 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618150729.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618150729.scss
new file mode 100644
index 0000000..cbe2c49
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618150729.scss
@@ -0,0 +1,90 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618150941.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618150941.scss
new file mode 100644
index 0000000..2814638
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618150941.scss
@@ -0,0 +1,90 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618150956.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618150956.scss
new file mode 100644
index 0000000..cbe2c49
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618150956.scss
@@ -0,0 +1,90 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151044.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151044.scss
new file mode 100644
index 0000000..4b2d7f8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151044.scss
@@ -0,0 +1,91 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog{
+      margin: 0 auto;
+    }
+
+    /* Modal Content */
+    .modal_content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+    }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151047.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151047.scss
new file mode 100644
index 0000000..f7e6aee
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151047.scss
@@ -0,0 +1,91 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+    }
+
+    /* Modal Content */
+    .modal_content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+    }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151134.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151134.scss
new file mode 100644
index 0000000..53b5f16
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151134.scss
@@ -0,0 +1,92 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+    }
+
+    /* Modal Content */
+    .modal_content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+    }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151320.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151320.scss
new file mode 100644
index 0000000..5f34e4e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151320.scss
@@ -0,0 +1,210 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+    }
+
+    /* Modal Content */
+    .modal_content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+    }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.modal_body_left{
+  margin: 0 auto;
+  float: left;
+  position: static;
+  display: flex;
+  justify-content: center; /*Центрирование по горизонтали*/
+  align-items: center;     /*Центрирование по вертикали */
+  width: 400px;
+}
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151431.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151431.scss
new file mode 100644
index 0000000..14b6930
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151431.scss
@@ -0,0 +1,210 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+    }
+
+    /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+    }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.modal_body_left{
+  margin: 0 auto;
+  float: left;
+  position: static;
+  display: flex;
+  justify-content: center; /*Центрирование по горизонтали*/
+  align-items: center;     /*Центрирование по вертикали */
+  width: 400px;
+}
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151502.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151502.scss
new file mode 100644
index 0000000..e1412e2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151502.scss
@@ -0,0 +1,210 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+    }
+
+    /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+    }
+
+  .body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.modal_body_left{
+  margin: 0 auto;
+  float: left;
+  position: static;
+  display: flex;
+  justify-content: center; /*Центрирование по горизонтали*/
+  align-items: center;     /*Центрирование по вертикали */
+  width: 400px;
+}
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151531.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151531.scss
new file mode 100644
index 0000000..dc72805
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151531.scss
@@ -0,0 +1,210 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+
+      /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+        }
+      }
+    }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.modal_body_left{
+  margin: 0 auto;
+  float: left;
+  position: static;
+  display: flex;
+  justify-content: center; /*Центрирование по горизонтали*/
+  align-items: center;     /*Центрирование по вертикали */
+  width: 400px;
+}
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618151612.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151612.scss
new file mode 100644
index 0000000..ba0f322
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618151612.scss
@@ -0,0 +1,209 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+      }
+    }
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.modal_body_left{
+  margin: 0 auto;
+  float: left;
+  position: static;
+  display: flex;
+  justify-content: center; /*Центрирование по горизонтали*/
+  align-items: center;     /*Центрирование по вертикали */
+  width: 400px;
+}
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152214.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152214.scss
new file mode 100644
index 0000000..c31dc1b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152214.scss
@@ -0,0 +1,210 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+        }
+      }
+    }
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152234.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152234.scss
new file mode 100644
index 0000000..3971076
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152234.scss
@@ -0,0 +1,212 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+.modal_body_right{
+  background: #F7F7F7;
+  width: 450px;
+  display: table;
+  float: left;
+  position: static;
+}
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152319.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152319.scss
new file mode 100644
index 0000000..9cc25d7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152319.scss
@@ -0,0 +1,214 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+.modal_header{
+  height: 450px;
+}
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152349.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152349.scss
new file mode 100644
index 0000000..4179751
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152349.scss
@@ -0,0 +1,217 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+          }
+
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152446.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152446.scss
new file mode 100644
index 0000000..73f9cd1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152446.scss
@@ -0,0 +1,221 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+
+            .title{
+              
+              font-size: 20px;
+              line-height: 24px;
+              letter-spacing: 0.02em;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152456.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152456.scss
new file mode 100644
index 0000000..08b5cef
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152456.scss
@@ -0,0 +1,220 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              letter-spacing: 0.02em;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152523.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152523.scss
new file mode 100644
index 0000000..330bf56
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152523.scss
@@ -0,0 +1,218 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              letter-spacing: 0.02em;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              letter-spacing: 0.02em;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152615.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152615.scss
new file mode 100644
index 0000000..98cd3f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152615.scss
@@ -0,0 +1,213 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152624.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152624.scss
new file mode 100644
index 0000000..7d44a97
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152624.scss
@@ -0,0 +1,214 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+            margin: 10px 10px 10px 15px;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152631.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152631.scss
new file mode 100644
index 0000000..5ec605a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152631.scss
@@ -0,0 +1,213 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152637.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152637.scss
new file mode 100644
index 0000000..98cd3f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152637.scss
@@ -0,0 +1,213 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152651.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152651.scss
new file mode 100644
index 0000000..d01ee7f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152651.scss
@@ -0,0 +1,214 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+            margin: 10px 10px 10px 15px;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+         
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+  
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618152706.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152706.scss
new file mode 100644
index 0000000..98cd3f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618152706.scss
@@ -0,0 +1,213 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+.pizza-block {
+  display: block ruby;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  &__selector {
+      -moz-transition: border 250ms, color 250ms;
+      -o-transition: border 250ms, color 250ms;
+      -webkit-transition: border 250ms, color 250ms;
+      transition: border 250ms, color 250ms;
+      cursor: pointer;
+
+    ul {
+      margin-left: -25px;
+
+      &:first-of-type {
+        margin-bottom: 6px;
+      }
+
+      li {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 14px;
+
+          display: table-cell;
+          height: 24px;
+          vertical-align: middle;
+          text-align: center;
+          position: relative;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 32px;
+
+          &.active {
+              background: #FED11E;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+              cursor: auto;
+          }
+
+          &.size{
+              width: 60px;
+              height: 32px;
+              border-radius: 8px;
+          }
+
+          &.type{
+              width: 178px;
+              height: 24px;
+              border-radius: 12px;
+              -webkit-border-radius: 12px;
+              -moz-border-radius: 12px;
+              -ms-border-radius: 12px;
+              -o-border-radius: 12px;
+          }
+      }
+    }
+  }
+}
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618153007.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618153007.scss
new file mode 100644
index 0000000..54430dc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618153007.scss
@@ -0,0 +1,212 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+            .pizza-block {
+              display: block ruby;
+              margin-bottom: 15px;
+              margin-left: 15px;
+              border-spacing: 0;
+              border-collapse: separate;
+
+              &_selector {
+                  -moz-transition: border 250ms, color 250ms;
+                  -o-transition: border 250ms, color 250ms;
+                  -webkit-transition: border 250ms, color 250ms;
+                  transition: border 250ms, color 250ms;
+                  cursor: pointer;
+
+                ul {
+                  margin-left: -25px;
+
+                  &:first-of-type {
+                    margin-bottom: 6px;
+                  }
+                  li {
+                      padding: 5px;
+                      cursor: pointer;
+                      font-size: 14px;
+                      display: table-cell;
+                      height: 24px;
+                      vertical-align: middle;
+                      text-align: center;
+                      position: relative;
+                      padding-left: 8px;
+                      padding-right: 8px;
+                      border-radius: 32px;
+
+                      &.active {
+                          background: #FED11E;
+                          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                          cursor: auto;
+                      }
+
+                      &.size{
+                          width: 60px;
+                          height: 32px;
+                          border-radius: 8px;
+                      }
+
+                      &.type{
+                          width: 178px;
+                          height: 24px;
+                          border-radius: 12px;
+                          -webkit-border-radius: 12px;
+                          -moz-border-radius: 12px;
+                          -ms-border-radius: 12px;
+                          -o-border-radius: 12px;
+                      }
+                  }
+                }
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618153028.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618153028.scss
new file mode 100644
index 0000000..c4fe32b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618153028.scss
@@ -0,0 +1,212 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+            .block {
+              display: block ruby;
+              margin-bottom: 15px;
+              margin-left: 15px;
+              border-spacing: 0;
+              border-collapse: separate;
+
+              &_selector {
+                  -moz-transition: border 250ms, color 250ms;
+                  -o-transition: border 250ms, color 250ms;
+                  -webkit-transition: border 250ms, color 250ms;
+                  transition: border 250ms, color 250ms;
+                  cursor: pointer;
+
+                ul {
+                  margin-left: -25px;
+
+                  &:first-of-type {
+                    margin-bottom: 6px;
+                  }
+                  li {
+                      padding: 5px;
+                      cursor: pointer;
+                      font-size: 14px;
+                      display: table-cell;
+                      height: 24px;
+                      vertical-align: middle;
+                      text-align: center;
+                      position: relative;
+                      padding-left: 8px;
+                      padding-right: 8px;
+                      border-radius: 32px;
+
+                      &.active {
+                          background: #FED11E;
+                          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                          cursor: auto;
+                      }
+
+                      &.size{
+                          width: 60px;
+                          height: 32px;
+                          border-radius: 8px;
+                      }
+
+                      &.type{
+                          width: 178px;
+                          height: 24px;
+                          border-radius: 12px;
+                          -webkit-border-radius: 12px;
+                          -moz-border-radius: 12px;
+                          -ms-border-radius: 12px;
+                          -o-border-radius: 12px;
+                      }
+                  }
+                }
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/Modal_20220618153111.scss b/.history/components/customer/pages/index/modals/pizza/Modal_20220618153111.scss
new file mode 100644
index 0000000..9455f84
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/Modal_20220618153111.scss
@@ -0,0 +1,212 @@
+.pizza_modal_card {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+
+  .dialog {
+    margin: 0 auto;
+    height: 533px;
+    width: 900px;
+      /* Modal Content */
+    .content {
+      background-color: #fefefe;
+      margin: auto;
+      /*border: 1px solid #888;*/
+      .body{
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+
+        .left{
+          margin: 0 auto;
+          float: left;
+          position: static;
+          display: flex;
+          justify-content: center; /*Центрирование по горизонтали*/
+          align-items: center;     /*Центрирование по вертикали */
+          width: 400px;
+
+          .img{
+            text-align: center;
+            height: 100%;
+            display: grid;;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+          }
+        }
+
+        .right{
+          background: #F7F7F7;
+          width: 450px;
+          display: table;
+          float: left;
+          position: static;
+          
+          .header{
+            height: 450px;
+            letter-spacing: 0.02em;
+
+            .title{
+              font-size: 20px;
+              line-height: 24px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+            .feature{
+              font-size: 13px;
+              line-height: 15px;
+              margin: 10px 10px 10px 15px;
+              color: #8E8E93;
+            }
+
+            .description{
+              font-size: 13px;
+              line-height: 15px;
+              color: #252A48;
+              margin: 10px 10px 10px 15px;
+            }
+
+            .block {
+              display: block ruby;
+              margin-bottom: 15px;
+              margin-left: 15px;
+              border-spacing: 0;
+              border-collapse: separate;
+
+              &_selector {
+                  -moz-transition: border 250ms, color 250ms;
+                  -o-transition: border 250ms, color 250ms;
+                  -webkit-transition: border 250ms, color 250ms;
+                  transition: border 250ms, color 250ms;
+                  cursor: pointer;
+
+                ul {
+                  margin-left: -25px;
+
+                  &:first-of-type {
+                    margin-bottom: 6px;
+                  }
+                  li {
+                      padding: 5px;
+                      cursor: pointer;
+                      font-size: 14px;
+                      display: table-cell;
+                      height: 24px;
+                      vertical-align: middle;
+                      text-align: center;
+                      position: relative;
+                      padding-left: 8px;
+                      padding-right: 8px;
+                      border-radius: 32px;
+
+                      &.active {
+                          background: #FED11E;
+                          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                          cursor: auto;
+                      }
+
+                      &.size{
+                          width: 60px;
+                          height: 32px;
+                          border-radius: 8px;
+                      }
+
+                      &.type{
+                          width: 178px;
+                          height: 24px;
+                          border-radius: 12px;
+                          -webkit-border-radius: 12px;
+                          -moz-border-radius: 12px;
+                          -ms-border-radius: 12px;
+                          -o-border-radius: 12px;
+                      }
+                    }
+                  }
+                }
+              }
+
+          }
+        }
+      }
+    }
+  }
+
+  
+
+
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  
+
+ 
+
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+
+
+
+
+
+
+.position_product{
+padding-top: 100px;
+ /* padding-top: 100px; 
+ right: 0;
+ left: unset !important;
+ position: absolute;*/
+}
+
+
+@media (max-width: 940px) {
+  .modal_product {
+    height: 1010px;
+    width: 100vw;
+    max-width: 400px;
+  }
+  .position_product{
+      padding-top: 5px;
+  }
+}
+
+
+.vendor-list_ul_modal {
+  padding-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 640px) {
+  .vendor-list_ul_modal {
+    padding-top: 8px;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531221132.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531221132.tsx
new file mode 100644
index 0000000..5919684
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531221132.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+    updateData: () => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState(0);
+    
+    type ChangeProps {
+        e: () => void;
+    }
+
+    const Change: React.FC<ChangeProps> = (e) => {
+        setVariable(e.target.value);
+        updateData(e.target.value);
+    }
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) => <>
+                <input
+                    type="radio"
+                    name="radio"
+                    className='radioButton'
+                    value={num}
+                    wwwwwwwwwdr332wewaasc={(e) =>Change(e) }
+                    checked={variable == num}
+                /> </>
+            )}
+        </div>
+    )
+}vvvccccccxc            
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531234725.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531234725.tsx
new file mode 100644
index 0000000..cf1bc3a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531234725.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={inputHandler}
+                />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531235725.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531235725.tsx
new file mode 100644
index 0000000..cf1bc3a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220531235725.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+    name: string,
+    label: string,
+    value: string,
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={inputHandler}
+                />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601000113.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601000113.tsx
new file mode 100644
index 0000000..58d3e7a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601000113.tsx
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={inputHandler}
+                />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601000752.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601000752.tsx
new file mode 100644
index 0000000..dccd8ab
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601000752.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001238.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001238.tsx
new file mode 100644
index 0000000..989d34a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001238.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001446.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001446.tsx
new file mode 100644
index 0000000..45406a6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001446.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001516.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001516.tsx
new file mode 100644
index 0000000..989d34a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001516.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+interface Props {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<Props> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001644.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001644.tsx
new file mode 100644
index 0000000..429841b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601001644.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+type RadioButtonProps = {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:number = event.target.value;
+        setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601085507.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601085507.tsx
new file mode 100644
index 0000000..6fbf565
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601085507.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+type RadioButtonProps = {
+    updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> = ({masImg, updateData }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:string = event.target.value;
+        console.log(value);
+        //setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601085808.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601085808.tsx
new file mode 100644
index 0000000..33b9c06
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601085808.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+type RadioButtonProps = {
+   // updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> = ({masImg }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:string = event.target.value;
+        console.log(value);
+        //setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601090524.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601090524.tsx
new file mode 100644
index 0000000..33b9c06
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601090524.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+type RadioButtonProps = {
+   // updateData: (value: number) => void;
+    masImg: string[],
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> = ({masImg }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:string = event.target.value;
+        console.log(value);
+        //setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601090855.tsx b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601090855.tsx
new file mode 100644
index 0000000..293a0fd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/RadioButton_20220601090855.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+type RadioButtonProps = {
+   // updateData: (value: number) => void;
+    masImg: number[],
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> = ({masImg }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:string = event.target.value;
+        console.log(value);
+        //setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220601090854.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220601090854.tsx
new file mode 100644
index 0000000..293a0fd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220601090854.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { InputRadio } from '../../../../../UI'
+type RadioButtonProps = {
+   // updateData: (value: number) => void;
+    masImg: number[],
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> = ({masImg }) => {
+    const [variable, setVariable] = useState<number>(0);
+
+    const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value:string = event.target.value;
+        console.log(value);
+        //setVariable(value);
+        //updateData(value);
+      };
+
+    return(
+        <div className='fieldset'>
+            {masImg.map((name, num) =>
+                <InputRadio
+                    key={name}
+                    num={num}
+                    variable={variable}
+                    onChange={() => inputHandler}
+                    label={''}
+                    value={0} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220615163730.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220615163730.tsx
new file mode 100644
index 0000000..603fdd9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220615163730.tsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+  img_thin: string;
+  name: string;
+  price: number;
+  size: string;
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40, 50], typeNames = ['традиционное тесто','тонкое тесто'];;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+  img_thin,
+  name,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(0);
+    
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+            <Image
+                src={'/assets/img/'+id+'.jpg'}
+                alt={'pizza'}
+                width={400}
+                height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+            <h3 className="modal_title">{title}</h3>
+            <p className="modal_feature">{feature}</p>
+            <p className="modal_description">{description}</p>
+            <div className="pizza-block__selector">
+                <ul>
+                {types.map((typeId) => (
+                    <li
+                    key={typeId}
+                    onClick={() => setActiveType(typeId)}
+                    className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                    {typeNames[typeId]}
+                    </li>
+                ))}
+                </ul>
+                <ul>
+                {sizes.map((size, i) => (
+                    <li
+                    key={size}
+                    onClick={() => setActiveSize(i)}
+                    className={activeSize === i ? classNames('active size') : classNames('size')}>
+                    {size} см
+                    </li>
+                ))}
+                </ul>
+            </div>
+            <div className='modal_footer'>
+                <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                onClick={addBasket}>В корзину за {sum} р</Button>
+                <Link href={"/"} as={"/"} scroll={false}>
+                <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                </Link>
+            </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220615163756.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220615163756.tsx
new file mode 100644
index 0000000..91d203c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220615163756.tsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft_trad: number;
+  description: string;
+  img_trad: string;
+  img_thin: string;
+  name: string;
+  price: number;
+  size: string;
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40, 50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'];;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img_trad,
+  heft_trad,
+  description,
+  img_thin,
+  name,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+            <Image
+                src={'/assets/img/'+id+'.jpg'}
+                alt={'pizza'}
+                width={400}
+                height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+            <h3 className="modal_title">{title}</h3>
+            <p className="modal_feature">{feature}</p>
+            <p className="modal_description">{description}</p>
+            <div className="pizza-block__selector">
+                <ul>
+                {types.map((typeId) => (
+                    <li
+                    key={typeId}
+                    onClick={() => setActiveType(typeId)}
+                    className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                    {typeNames[typeId]}
+                    </li>
+                ))}
+                </ul>
+                <ul>
+                {sizes.map((size, i) => (
+                    <li
+                    key={size}
+                    onClick={() => setActiveSize(i)}
+                    className={activeSize === i ? classNames('active size') : classNames('size')}>
+                    {size} см
+                    </li>
+                ))}
+                </ul>
+            </div>
+            <div className='modal_footer'>
+                <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                onClick={addBasket}>В корзину за {sum} р</Button>
+                <Link href={"/"} as={"/"} scroll={false}>
+                <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                </Link>
+            </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616103634.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616103634.tsx
new file mode 100644
index 0000000..b37c2f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616103634.tsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  name: string;
+  price: string[];
+  size: string[];
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'];;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  name,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+            <Image
+                src={'/assets/img/'+id+'.jpg'}
+                alt={'pizza'}
+                width={400}
+                height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+            <h3 className="modal_title">{title}</h3>
+            <p className="modal_feature">{feature}</p>
+            <p className="modal_description">{description}</p>
+            <div className="pizza-block__selector">
+                <ul>
+                {types.map((typeId) => (
+                    <li
+                        key={typeId}
+                        onClick={() => setActiveType(typeId)}
+                        className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                        {typeNames[typeId]}
+                    </li>
+                ))}
+                </ul>
+                <ul>
+                {sizes.map((size, i) => (
+                    <li
+                        key={size}
+                        onClick={() => setActiveSize(i)}
+                        className={activeSize === i ? classNames('active size') : classNames('size')}>
+                        {size} см
+                    </li>
+                ))}
+                </ul>
+            </div>
+            <div className='modal_footer'>
+                <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                    onClick={addBasket}>В корзину за {sum} р</Button>
+                <Link href={"/"} as={"/"} scroll={false}>
+                    <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                </Link>
+            </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616103708.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616103708.tsx
new file mode 100644
index 0000000..c76ede8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616103708.tsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  name: string;
+  price: string[];
+  size: string[];
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'];;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  name,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+id+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616103943.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616103943.tsx
new file mode 100644
index 0000000..dba3db1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616103943.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'];;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[0]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616104048.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616104048.tsx
new file mode 100644
index 0000000..8b61b02
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616104048.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'];;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616104556.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616104556.tsx
new file mode 100644
index 0000000..153c19e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616104556.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'], ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    feature = "30 см, традиционное тесто, 610 г";
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616120114.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616120114.tsx
new file mode 100644
index 0000000..2c2880d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616120114.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+  feature: string;
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+  feature
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    feature = "30 см, традиционное тесто, 610 г";
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616120422.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616120422.tsx
new file mode 100644
index 0000000..29cd00c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616120422.tsx
@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] + heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616120434.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616120434.tsx
new file mode 100644
index 0000000..918c7cb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616120434.tsx
@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616120522.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616120522.tsx
new file mode 100644
index 0000000..e6171a4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616120522.tsx
@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+    setFeature('0');
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616120635.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616120635.tsx
new file mode 100644
index 0000000..b52c2b2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616120635.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616123335.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616123335.tsx
new file mode 100644
index 0000000..20f3813
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616123335.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_center'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616123445.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616123445.tsx
new file mode 100644
index 0000000..9269d0c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616123445.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616131707.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616131707.tsx
new file mode 100644
index 0000000..c90bb8d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616131707.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { BoxScroll } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <BoxScroll>
+
+                </BoxScroll>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616132750.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616132750.tsx
new file mode 100644
index 0000000..e5b70ca
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616132750.tsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { BoxScroll } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+    
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <BoxScroll>
+
+                </BoxScroll>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616133237.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616133237.tsx
new file mode 100644
index 0000000..93ea4e4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616133237.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { BoxScroll } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={''} check={''} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <BoxScroll>
+                        {ingredients}
+                </BoxScroll>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616135535.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616135535.tsx
new file mode 100644
index 0000000..93ea4e4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616135535.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { BoxScroll } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={''} check={''} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <BoxScroll>
+                        {ingredients}
+                </BoxScroll>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616140229.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616140229.tsx
new file mode 100644
index 0000000..4c14142
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616140229.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={''} check={''} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <Box>
+                        {ingredients}
+                </Box>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616140446.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616140446.tsx
new file mode 100644
index 0000000..0e683b4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616140446.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={''} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <Box>
+                        {ingredients}
+                </Box>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616140501.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616140501.tsx
new file mode 100644
index 0000000..b07b4ef
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616140501.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <Box>
+                        {ingredients}
+                </Box>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141154.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141154.tsx
new file mode 100644
index 0000000..a376a31
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141154.tsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <Box>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                
+                {ingredients}
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </Box>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141209.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141209.tsx
new file mode 100644
index 0000000..77d6c36
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141209.tsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                
+                {ingredients}
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141237.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141237.tsx
new file mode 100644
index 0000000..f37791c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141237.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="containers">
+                    {ingredients}
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141256.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141256.tsx
new file mode 100644
index 0000000..70a5a81
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141256.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="container">
+                    {ingredients}
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141344.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141344.tsx
new file mode 100644
index 0000000..477c093
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141344.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="container">
+                    <section >
+                        <ul className={'vendor-list__ul'}>
+                            {ingredients}
+                        </ul>
+                    </section>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141423.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141423.tsx
new file mode 100644
index 0000000..e4ad089
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141423.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <section>
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </section>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616141944.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616141944.tsx
new file mode 100644
index 0000000..78c1b99
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616141944.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { BoxScroll } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <BoxScroll>
+                        {ingredients}
+                </BoxScroll>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616142011.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616142011.tsx
new file mode 100644
index 0000000..7ccd223
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616142011.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div>
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616142216.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616142216.tsx
new file mode 100644
index 0000000..ab0122f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616142216.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616142745.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616142745.tsx
new file mode 100644
index 0000000..062df0b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616142745.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616142904.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616142904.tsx
new file mode 100644
index 0000000..ab0122f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616142904.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616144142.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616144142.tsx
new file mode 100644
index 0000000..3ed3e48
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616144142.tsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+    {name:'tomato', title:'Томаты', price:16},
+    {name:'cheese', title:'Сыр', price:20},
+    {name:'mushroom', title:'Грибы', price:10},
+    {name:'bacon', title:'Бекон', price:30},
+    {name:'pineapple', title:'Ананас', price:30},
+    {name:'pickles', title:'Огурчик', price:6},
+    {name:'jalapeno', title:'Халапенью', price:6}];
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'yes'} onClick={function (): void {
+          throw new Error('Function not implemented.');
+      } } key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616144741.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616144741.tsx
new file mode 100644
index 0000000..f521ea9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616144741.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+    const addCheck = () => {
+        console.log('addCheck');
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'check'} onClick={addCheck} key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145050.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145050.tsx
new file mode 100644
index 0000000..6db2e53
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145050.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+    const addCheck = () => {
+        console.log('addCheck');
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={addCheck} key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145153.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145153.tsx
new file mode 100644
index 0000000..240ee7b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145153.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+    const addCheck = (e) => {
+        console.log(e.target.value);
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={addCheck(e)} key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145219.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145219.tsx
new file mode 100644
index 0000000..bbecc17
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145219.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+    const addCheck = (e) => {
+        console.log(e.target.value);
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={addCheck(e.target)} key={index} {...obj} />);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ingredients}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145732.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145732.tsx
new file mode 100644
index 0000000..73827a9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145732.tsx
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+   let check = ['none', 'none', 'none', 'none', 'none', 'none', 'none', 'none'];
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + name)}> </div>
+                                <p className='ingredients_name'>{title}</p>
+                                <p className='ingredients_price'>{price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => onClick(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145836.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145836.tsx
new file mode 100644
index 0000000..68b5ff7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145836.tsx
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+   let check = ['none', 'none', 'none', 'none', 'none', 'none', 'none', 'none'];
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{title}</p>
+                                <p className='ingredients_price'>{price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => onClick(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145900.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145900.tsx
new file mode 100644
index 0000000..ef88bd1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145900.tsx
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+   let check = ['none', 'none', 'none', 'none', 'none', 'none', 'none', 'none'];
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => onClick(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616145958.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616145958.tsx
new file mode 100644
index 0000000..6b5b31d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616145958.tsx
@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+    
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => onClick(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616150159.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616150159.tsx
new file mode 100644
index 0000000..009c18e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616150159.tsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+   
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+    const ingredientsAdd = (e) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+       // console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616150255.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616150255.tsx
new file mode 100644
index 0000000..06e06d6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616150255.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+       // console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616150313.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616150313.tsx
new file mode 100644
index 0000000..4e76e38
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616150313.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+       // console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616150344.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616150344.tsx
new file mode 100644
index 0000000..4e76e38
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616150344.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [activeCheck, setActiveCheck] = useState([]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+       // console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616150928.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616150928.tsx
new file mode 100644
index 0000000..bcc8511
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616150928.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+       // console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152039.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152039.tsx
new file mode 100644
index 0000000..0af2422
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152039.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152213.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152213.tsx
new file mode 100644
index 0000000..c0c6ee3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152213.tsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(price[activeSize]+ing[e.target.id].price); 
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152252.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152252.tsx
new file mode 100644
index 0000000..4d59501
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152252.tsx
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(price[activeSize]+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(price[activeSize]-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152344.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152344.tsx
new file mode 100644
index 0000000..6b63cb7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152344.tsx
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(price[activeSize]+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152407.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152407.tsx
new file mode 100644
index 0000000..82c75bb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152407.tsx
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152454.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152454.tsx
new file mode 100644
index 0000000..82c75bb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152454.tsx
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152554.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152554.tsx
new file mode 100644
index 0000000..ba65e47
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152554.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616152609.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616152609.tsx
new file mode 100644
index 0000000..ba65e47
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616152609.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list__ul'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616163109.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616163109.tsx
new file mode 100644
index 0000000..5ae8f17
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616163109.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
+                        onClick={addBasket}>В корзину за {sum} р</Button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616185306.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616185306.tsx
new file mode 100644
index 0000000..094c8a9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616185306.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616185340.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616185340.tsx
new file mode 100644
index 0000000..a1d934f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616185340.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616185408.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616185408.tsx
new file mode 100644
index 0000000..4b583c3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616185408.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616211917.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616211917.tsx
new file mode 100644
index 0000000..80adbc5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616211917.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 minus')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616211940.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616211940.tsx
new file mode 100644
index 0000000..4b583c3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616211940.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616211948.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616211948.tsx
new file mode 100644
index 0000000..0be1d5e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616211948.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button minus'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? '+' : '-'}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616211958.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616211958.tsx
new file mode 100644
index 0000000..273dc4f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616211958.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button minus'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616212051.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616212051.tsx
new file mode 100644
index 0000000..2fa0d21
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616212051.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button minus'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}><i className="minus"></i></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616212107.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616212107.tsx
new file mode 100644
index 0000000..2fa0d21
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616212107.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button minus'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}><i className="minus"></i></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616215739.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616215739.tsx
new file mode 100644
index 0000000..d950363
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616215739.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button minus'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}><p className="minus"></p></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616215850.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616215850.tsx
new file mode 100644
index 0000000..05e89f2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616215850.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button minus'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}><span className="minus"></span></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616215947.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616215947.tsx
new file mode 100644
index 0000000..a0e5a63
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616215947.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}><span className="minus"></span></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616221209.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616221209.tsx
new file mode 100644
index 0000000..15c0eee
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616221209.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}><HiMinus/></button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616221319.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616221319.tsx
new file mode 100644
index 0000000..374941c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616221319.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? 'none' : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220616221405.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220616221405.tsx
new file mode 100644
index 0000000..d5d486b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220616221405.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+            setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062239.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062239.tsx
new file mode 100644
index 0000000..aa9b579
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062239.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(checkNow);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062328.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062328.tsx
new file mode 100644
index 0000000..91c3e3e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062328.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(e.target.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, index) => <li className='ingredients_box' key={index}>
+                            <div className={classNames('ingredients_text_box ' + (check[index] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={index}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[index] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062402.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062402.tsx
new file mode 100644
index 0000000..b161861
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062402.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(e.target.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062424.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062424.tsx
new file mode 100644
index 0000000..5e531be
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062424.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(e.target.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{count}{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062453.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062453.tsx
new file mode 100644
index 0000000..2621ad1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062453.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(e.target);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062753.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062753.tsx
new file mode 100644
index 0000000..bb5748c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062753.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log((e.target as Element).id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062828.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062828.tsx
new file mode 100644
index 0000000..b161861
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062828.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(e.target.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617062837.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617062837.tsx
new file mode 100644
index 0000000..bb5748c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617062837.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setCheck({...check, [e.target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log((e.target as Element).id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063028.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063028.tsx
new file mode 100644
index 0000000..9910790
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063028.tsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: Event) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log((target as Element).id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063052.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063052.tsx
new file mode 100644
index 0000000..d5faa3f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063052.tsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: Event) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063126.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063126.tsx
new file mode 100644
index 0000000..9143cc9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063126.tsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: Event) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log((target as HTMLButtonElement).id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063204.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063204.tsx
new file mode 100644
index 0000000..ce0546b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063204.tsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    const ingredientsAdd = (e: Event) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log((target as HTMLButtonElement).value);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063331.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063331.tsx
new file mode 100644
index 0000000..60cd754
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063331.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.value);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063343.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063343.tsx
new file mode 100644
index 0000000..fc84276
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063343.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063354.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063354.tsx
new file mode 100644
index 0000000..5bf5ea9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063354.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063412.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063412.tsx
new file mode 100644
index 0000000..566663d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063412.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063603.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063603.tsx
new file mode 100644
index 0000000..56f2725
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063603.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={() => ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063615.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063615.tsx
new file mode 100644
index 0000000..af0bca6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063615.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={() => ingredientsAdd()}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063636.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063636.tsx
new file mode 100644
index 0000000..9f83226
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063636.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e.target.id)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063649.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063649.tsx
new file mode 100644
index 0000000..c66f68f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063649.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(id: e.target.id)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063654.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063654.tsx
new file mode 100644
index 0000000..9f83226
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063654.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={(e) => ingredientsAdd(e.target.id)}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063804.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063804.tsx
new file mode 100644
index 0000000..e3b571d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063804.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    const clickHandler = (e: MouseEvent): void => {
+        e.preventDefault();
+        alert(`Clicked at ${e.pageX} ${e.pageY}`);
+      }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={clickHandler}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063826.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063826.tsx
new file mode 100644
index 0000000..6c1fe5f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063826.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    const clickHandler = (e: MouseEvent): void => {
+        e.preventDefault();
+        alert(`Clicked at ${e.id} ${e.pageY}`);
+      }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={clickHandler}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617063840.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617063840.tsx
new file mode 100644
index 0000000..3a5b70d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617063840.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    const clickHandler = (e: MouseEvent): void => {
+        e.preventDefault();
+        alert(`Clicked at ${e.name}`);
+      }
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={clickHandler}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103015.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103015.tsx
new file mode 100644
index 0000000..2a2055c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103015.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    const buttonHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={buttonHandler}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103036.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103036.tsx
new file mode 100644
index 0000000..736c568
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103036.tsx
@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (e: HTMLElementEvent<HTMLButtonElement>) => {
+        const { target } = e;
+        setCheck({...check, [target.id]: check[e.target.id] === 'none' ? 'yellow' : 'none'});
+        checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(target.name);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+    }
+    const buttonHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={buttonHandler}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103148.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103148.tsx
new file mode 100644
index 0000000..d6b9f83
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103148.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+       // setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(button.id);
+        if (check[e.target.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103203.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103203.tsx
new file mode 100644
index 0000000..c73e958
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103203.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+       // setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(button.id);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103413.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103413.tsx
new file mode 100644
index 0000000..a355996
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103413.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id > '0' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103428.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103428.tsx
new file mode 100644
index 0000000..a355996
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103428.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id > '0' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck(['none','none','none','none','none','none','none','none']);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617103608.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617103608.tsx
new file mode 100644
index 0000000..d606af3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617103608.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id > '0' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617104855.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617104855.tsx
new file mode 100644
index 0000000..f683975
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617104855.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105540.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105540.tsx
new file mode 100644
index 0000000..0facde0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105540.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: !button.id});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105605.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105605.tsx
new file mode 100644
index 0000000..af079c1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105605.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105633.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105633.tsx
new file mode 100644
index 0000000..8fc52ac
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105633.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id >= '0' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105708.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105708.tsx
new file mode 100644
index 0000000..337237a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105708.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: button.id === 'yellow' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105900.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105900.tsx
new file mode 100644
index 0000000..78e82e8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105900.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: check[button.id] === 'yellow' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105915.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105915.tsx
new file mode 100644
index 0000000..ec89d98
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105915.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.name]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617105952.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617105952.tsx
new file mode 100644
index 0000000..7327509
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617105952.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'none' : 'yellow'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110031.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110031.tsx
new file mode 100644
index 0000000..e9646be
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110031.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'yellow' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110042.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110042.tsx
new file mode 100644
index 0000000..da9c466
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110042.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110059.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110059.tsx
new file mode 100644
index 0000000..e9646be
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110059.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'yellow' ? <HiPlus/> : <HiMinus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110138.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110138.tsx
new file mode 100644
index 0000000..4abba13
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110138.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+      //  if (check[button.id]==='none') {
+           // setSum(sum+ing[e.target.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+      //  } else {
+          //  setSum(sum-ing[e.target.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110545.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110545.tsx
new file mode 100644
index 0000000..42949e5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110545.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum+ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+      //  }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110555.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110555.tsx
new file mode 100644
index 0000000..152c16f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110555.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum+ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum-ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617110619.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617110619.tsx
new file mode 100644
index 0000000..0ab6d5d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617110619.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617111229.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617111229.tsx
new file mode 100644
index 0000000..3fabf65
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617111229.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))
+                                 onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617111257.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617111257.tsx
new file mode 100644
index 0000000..25503e5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617111257.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617111316.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617111316.tsx
new file mode 100644
index 0000000..77589b9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617111316.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                    name={obj.name}
+                                    id={count}
+                                    value={check[count]}
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617111350.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617111350.tsx
new file mode 100644
index 0000000..98994cd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617111350.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                  name={obj.name}
+                                  id={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}
+                                   
+                                    
+                                    onClick={ingredientsAdd}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617111416.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617111416.tsx
new file mode 100644
index 0000000..1bf84ec
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617111416.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                  name={obj.name}
+                                  id={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <button
+                                    className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</button>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617111430.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617111430.tsx
new file mode 100644
index 0000000..bb5c7ca
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617111430.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                  name={obj.name}
+                                  id={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div
+                                    className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_32')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617161037.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617161037.tsx
new file mode 100644
index 0000000..4add855
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617161037.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                  name={obj.name}
+                                  id={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div
+                                    className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_48')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617161138.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617161138.tsx
new file mode 100644
index 0000000..06fb502
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617161138.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                  name={obj.name}
+                                  id={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div
+                                    className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>}</div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617163917.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617163917.tsx
new file mode 100644
index 0000000..d1ca254
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617163917.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    id={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617164131.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617164131.tsx
new file mode 100644
index 0000000..5246670
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617164131.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    id={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_30')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617164145.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617164145.tsx
new file mode 100644
index 0000000..1f58207
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617164145.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Ingredients } from './';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    id={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617165525.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617165525.tsx
new file mode 100644
index 0000000..05bffd1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617165525.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState([{}]);
+
+    var checkNow = ['none','none','none','none','none','none','none','none'];
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    id={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617171025.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617171025.tsx
new file mode 100644
index 0000000..37eeaaf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617171025.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState(price[activeSize]);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button:  HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id]==='none') {
+            setSum(sum-ing[button.id].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([{}]);
+        setSum(price[activeSize]);
+      }, [activeSize, activeType, heft]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    id={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617171215.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617171215.tsx
new file mode 100644
index 0000000..9fd3600
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617171215.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button:  HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.id]: check[button.id as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.id as unknown as number]==='none') {
+            setSum(sum-ing[button.id as unknown as number].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.id as unknown as number].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    id={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617171449.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617171449.tsx
new file mode 100644
index 0000000..0147935
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617171449.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        const button:  HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                    name={obj.name}
+                                    value={count}
+                                    onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617171653.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617171653.tsx
new file mode 100644
index 0000000..df84e98
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617171653.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        const button:  HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 name={obj.name}
+                                 value={count}
+                                onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617171919.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617171919.tsx
new file mode 100644
index 0000000..01717f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617171919.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 name={obj.name}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617171923.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617171923.tsx
new file mode 100644
index 0000000..82820f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617171923.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 name={obj.name}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617172135.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617172135.tsx
new file mode 100644
index 0000000..82820f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617172135.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Button } from '../../../../../UI';
+import { Box } from '../../../../../../components/customer/containers';
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+    const addBasket = () => {
+        console.log('add');
+    }
+
+    const onClick = () => {
+        console.log('addCheck');
+    }
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+        target: T;
+      }
+
+      interface Employee {
+        id: number;
+        name: string;
+      }
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+       // checkNow[e.target.id] = check[e.target.id] === 'none' ? 'yellow' : 'none';
+        console.log(check);
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+            //props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+           //props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
+        }
+        console.log(button.name);
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 name={obj.name}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617172555.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617172555.tsx
new file mode 100644
index 0000000..b364323
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617172555.tsx
@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 name={obj.name}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617172800.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617172800.tsx
new file mode 100644
index 0000000..c69fe16
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617172800.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLDivElement, HTMLButtonElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617173043.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617173043.tsx
new file mode 100644
index 0000000..0fe45ab
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617173043.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+        event.preventDefault();
+        const button: HTMLButtonElement = event.currentTarget as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617173835.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617173835.tsx
new file mode 100644
index 0000000..bc92251
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617173835.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))}
+                                 value={count}
+                                 onClick={ingredientsAdd}>
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617190638.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617190638.tsx
new file mode 100644
index 0000000..9ea1961
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617190638.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <button value={count} onClick={ingredientsAdd} >
+                                <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                    <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                    <p className='ingredients_name'>{obj.title}</p>
+                                    <p className='ingredients_price'>{obj.price} p</p>
+                                    <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                                </div>
+                            </button>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617193102.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617193102.tsx
new file mode 100644
index 0000000..24729ec
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617193102.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <span value={count} onClick={ingredientsAdd} >
+                                <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                    <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                    <p className='ingredients_name'>{obj.title}</p>
+                                    <p className='ingredients_price'>{obj.price} p</p>
+                                    <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                                </div>
+                            </span>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617193132.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617193132.tsx
new file mode 100644
index 0000000..6cb0a6d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617193132.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) => <li className='ingredients_box' key={count}>
+                            <div value={count} onClick={ingredientsAdd} >
+                                <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                    <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                    <p className='ingredients_name'>{obj.title}</p>
+                                    <p className='ingredients_price'>{obj.price} p</p>
+                                    <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                                </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617211744.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617211744.tsx
new file mode 100644
index 0000000..ce9f26e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617211744.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617211746.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617211746.tsx
new file mode 100644
index 0000000..ce9f26e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617211746.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617211836.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617211836.tsx
new file mode 100644
index 0000000..8be8389
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617211836.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        console.log(button);
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+            setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+            setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617211901.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617211901.tsx
new file mode 100644
index 0000000..2f4cca8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617211901.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        console.log(button);
+        setCheck({...check, [button.value]: check[button.value as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.value as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617211925.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617211925.tsx
new file mode 100644
index 0000000..57f9079
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617211925.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        console.log(button);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212008.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212008.tsx
new file mode 100644
index 0000000..57f9079
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212008.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        console.log(button);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212018.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212018.tsx
new file mode 100644
index 0000000..e844daf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212018.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        console.log(button.key);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212028.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212028.tsx
new file mode 100644
index 0000000..a44cb53
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212028.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.id as any;
+        console.log(button.value);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212115.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212115.tsx
new file mode 100644
index 0000000..2408c30
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212115.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.target as any;
+        console.log(button.value);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212134.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212134.tsx
new file mode 100644
index 0000000..2b93775
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212134.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button.value);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212141.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212141.tsx
new file mode 100644
index 0000000..408ec24
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212141.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button.name]: check[button.name as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button.name as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212201.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212201.tsx
new file mode 100644
index 0000000..8602f4e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212201.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+           // setSum(sum-ing[button.value as unknown as number].price);
+        } else {
+          //  setSum(sum+ing[button.value as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220617212215.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220617212215.tsx
new file mode 100644
index 0000000..7fd133b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220617212215.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='modal_body_left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152151.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152151.tsx
new file mode 100644
index 0000000..9338ad5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152151.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='modal_img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152222.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152222.tsx
new file mode 100644
index 0000000..3b893a1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152222.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='modal_body_right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152251.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152251.tsx
new file mode 100644
index 0000000..9afe21b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152251.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="modal_header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152353.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152353.tsx
new file mode 100644
index 0000000..9b1bd4c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152353.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="modal_title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152412.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152412.tsx
new file mode 100644
index 0000000..a0d528b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152412.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="modal_feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152502.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152502.tsx
new file mode 100644
index 0000000..98db1b9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152502.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="modal_description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618152528.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618152528.tsx
new file mode 100644
index 0000000..1ba1089
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618152528.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="pizza-block__selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618153011.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618153011.tsx
new file mode 100644
index 0000000..2afa859
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618153011.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="pizza-block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618153022.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618153022.tsx
new file mode 100644
index 0000000..dc2416b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618153022.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="IngredientsBox">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618154531.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618154531.tsx
new file mode 100644
index 0000000..bf67448
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618154531.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="ingredients_box">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618154545.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618154545.tsx
new file mode 100644
index 0000000..bf67448
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618154545.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className="ingredients_box">
+                    <ul className={'vendor-list_ul_modal'}>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618154555.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618154555.tsx
new file mode 100644
index 0000000..d0d830a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618154555.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients_box'>
+                    <ul className='vendor-list_ul_modal'>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618154632.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618154632.tsx
new file mode 100644
index 0000000..ba405b9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618154632.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='vendor-list_ul_modal'>
+                        {ing.map((obj, count) =>
+                        <li className='ingredients_box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618154648.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618154648.tsx
new file mode 100644
index 0000000..48684f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618154648.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='vendor-list_ul_modal'>
+                        {ing.map((obj, count) =>
+                        <li className='box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618155038.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618155038.tsx
new file mode 100644
index 0000000..ba93a2a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618155038.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'>
+                        {ing.map((obj, count) =>
+                        <li className='box' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618155852.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618155852.tsx
new file mode 100644
index 0000000..6358923
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618155852.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul>
+                        {ing.map((obj, count) =>
+                        <li key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618155925.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618155925.tsx
new file mode 100644
index 0000000..96bed28
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618155925.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul> {ing.map((obj, count) =>
+                        <li key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618160645.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618160645.tsx
new file mode 100644
index 0000000..60efe83
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618160645.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('ingredients_text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618160820.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618160820.tsx
new file mode 100644
index 0000000..0bf659a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618160820.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('ingredients_img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618161353.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618161353.tsx
new file mode 100644
index 0000000..7d331db
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618161353.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none' ? 'yellow' : 'none'))} >
+                                <div className={classNames('img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618161823.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618161823.tsx
new file mode 100644
index 0000000..552d0a2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618161823.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618162529.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618162529.tsx
new file mode 100644
index 0000000..b958336
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618162529.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img_ing ' + obj.name)}> </div>
+                                <p className='ingredients_name'>{obj.title}</p>
+                                <p className='ingredients_price'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618162730.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618162730.tsx
new file mode 100644
index 0000000..aa6f234
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618162730.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img_ing ' + obj.name)}> </div>
+                                <p className='title_ing'>{obj.title}</p>
+                                <p className='price_ing'>{obj.price} p</p>
+                                <div className={'ingredients_button'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618202323.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618202323.tsx
new file mode 100644
index 0000000..196d630
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618202323.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none' ? 'yellow' : 'none'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img_ing ' + obj.name)}> </div>
+                                <p className='title_ing'>{obj.title}</p>
+                                <p className='price_ing'>{obj.price} p</p>
+                                <div className={'button_ing'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618202436.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618202436.tsx
new file mode 100644
index 0000000..8f8eed5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618202436.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none_ing' ? 'yellow_ing' : 'none_ing'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none_ing' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img_ing ' + obj.name)}> </div>
+                                <p className='title_ing'>{obj.title}</p>
+                                <p className='price_ing'>{obj.price} p</p>
+                                <div className={'button_ing'}>{check[count] === 'none' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/content_20220618202448.tsx b/.history/components/customer/pages/index/modals/pizza/content_20220618202448.tsx
new file mode 100644
index 0000000..c13d6c8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/content_20220618202448.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none_ing' ? 'yellow_ing' : 'none_ing'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none_ing' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img_ing ' + obj.name)}> </div>
+                                <p className='title_ing'>{obj.title}</p>
+                                <p className='price_ing'>{obj.price} p</p>
+                                <div className={'button_ing'}>{check[count] === 'none_ing' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/pizza/index_20220601085616.ts b/.history/components/customer/pages/index/modals/pizza/index_20220601085616.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/pizza/index_20220601085628.ts b/.history/components/customer/pages/index/modals/pizza/index_20220601085628.ts
new file mode 100644
index 0000000..26cda92
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/index_20220601085628.ts
@@ -0,0 +1 @@
+export * from './RadioButton'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/index_20220601090324.ts b/.history/components/customer/pages/index/modals/pizza/index_20220601090324.ts
new file mode 100644
index 0000000..74e078b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/index_20220601090324.ts
@@ -0,0 +1,2 @@
+export * from './RadioButton'
+export * from './pizzaCard'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/index_20220615163354.ts b/.history/components/customer/pages/index/modals/pizza/index_20220615163354.ts
new file mode 100644
index 0000000..055a5be
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/index_20220615163354.ts
@@ -0,0 +1,2 @@
+export * from './content'
+export * from './pizzaCard'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/index_20220616133007.ts b/.history/components/customer/pages/index/modals/pizza/index_20220616133007.ts
new file mode 100644
index 0000000..0fb93b3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/index_20220616133007.ts
@@ -0,0 +1,3 @@
+export * from './content'
+export * from './pizzaCard'
+export * from './Ingredients'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/index_20220617162939.ts b/.history/components/customer/pages/index/modals/pizza/index_20220617162939.ts
new file mode 100644
index 0000000..055a5be
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/index_20220617162939.ts
@@ -0,0 +1,2 @@
+export * from './content'
+export * from './pizzaCard'
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531162610.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531162610.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531162625.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531162625.tsx
new file mode 100644
index 0000000..fefaaff
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531162625.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/pages/index/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163128.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163128.tsx
new file mode 100644
index 0000000..82339c6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163128.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163133.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163133.tsx
new file mode 100644
index 0000000..6b89223
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163133.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+     
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163150.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163150.tsx
new file mode 100644
index 0000000..c3fee5c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163150.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const : React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+     
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163151.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163151.tsx
new file mode 100644
index 0000000..f49a101
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163151.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const Pi: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+     
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163155.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163155.tsx
new file mode 100644
index 0000000..749b4f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163155.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+     
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163157.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163157.tsx
new file mode 100644
index 0000000..749b4f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531163157.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+     
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215502.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215502.tsx
new file mode 100644
index 0000000..0b591ec
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215502.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215615.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215615.tsx
new file mode 100644
index 0000000..edbb930
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215615.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import {}
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215634.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215634.tsx
new file mode 100644
index 0000000..d409a5a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215634.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } form ''
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215641.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215641.tsx
new file mode 100644
index 0000000..ca98e16
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215641.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } form '../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215645.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215645.tsx
new file mode 100644
index 0000000..9222d6a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215645.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215648.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215648.tsx
new file mode 100644
index 0000000..870f8ce
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215648.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215655.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215655.tsx
new file mode 100644
index 0000000..3b3d656
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215655.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../modals'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215658.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215658.tsx
new file mode 100644
index 0000000..5144b1e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215658.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../modals/pizza'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215703.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215703.tsx
new file mode 100644
index 0000000..9222d6a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215703.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215707.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215707.tsx
new file mode 100644
index 0000000..412a40c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215707.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../.'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215708.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215708.tsx
new file mode 100644
index 0000000..eec775e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215708.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215710.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215710.tsx
new file mode 100644
index 0000000..8ec99e0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215710.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215720.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215720.tsx
new file mode 100644
index 0000000..dfca073
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215720.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from './'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215724.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215724.tsx
new file mode 100644
index 0000000..870f8ce
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215724.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215726.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215726.tsx
new file mode 100644
index 0000000..e6fb61f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215726.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../.././/'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215733.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215733.tsx
new file mode 100644
index 0000000..8ec99e0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215733.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215736.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215736.tsx
new file mode 100644
index 0000000..9202600
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215736.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../../'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215737.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215737.tsx
new file mode 100644
index 0000000..fe48e9f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215737.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215738.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215738.tsx
new file mode 100644
index 0000000..fe48e9f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215738.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215823.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215823.tsx
new file mode 100644
index 0000000..b38aeaa
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215823.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> : '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215826.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215826.tsx
new file mode 100644
index 0000000..a10f107
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215826.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215858.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215858.tsx
new file mode 100644
index 0000000..9a4bcb8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531215858.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221147.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221147.tsx
new file mode 100644
index 0000000..37bfd2a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221147.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+/''''''
+                      \
+                    }
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221151.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221151.tsx
new file mode 100644
index 0000000..f5ba48e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221151.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+/''''''
+                      \
+                    
+                    --p[]}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221845.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221845.tsx
new file mode 100644
index 0000000..3bbdbdb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221845.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+/''''''}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221847.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221847.tsx
new file mode 100644
index 0000000..9a4bcb8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220531221847.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601085821.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601085821.tsx
new file mode 100644
index 0000000..bbe37a7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601085821.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+
+                    <RadioButton masImg={['12','23']} />
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601085945.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601085945.tsx
new file mode 100644
index 0000000..d92d096
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601085945.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    <RadioButton masImg={['12','23']} />
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601090104.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601090104.tsx
new file mode 100644
index 0000000..2251ccb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601090104.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <RadioButton masImg={['12','23']} />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601090857.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601090857.tsx
new file mode 100644
index 0000000..a798ec2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220601090857.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <RadioButton masImg={[12,23]} />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174529.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174529.tsx
new file mode 100644
index 0000000..3ee6d46
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174529.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: number };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174551.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174551.tsx
new file mode 100644
index 0000000..17bff88
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174551.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174612.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174612.tsx
new file mode 100644
index 0000000..3424567
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603174612.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175317.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175317.tsx
new file mode 100644
index 0000000..e205441
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175317.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+ sf sd sgf gdfg dfg dgd fg
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175724.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175724.tsx
new file mode 100644
index 0000000..9cf9ba5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175724.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+        <Link href={"/"} as={"/"} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Добавить
+                      </button>
+                      </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175745.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175745.tsx
new file mode 100644
index 0000000..1eed077
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220603175745.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+        <Link href={"/"} as={"/"} >
+                      <button
+                          className={'yelow button_size_32'}
+                      >Закрыть
+                      </button>
+                      </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604082614.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604082614.tsx
new file mode 100644
index 0000000..6deebe6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604082614.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+        <Link href={"/"} as={"/"} scroll={false}>
+                      <button
+                          className={'yelow button_size_32'}
+                      >Закрыть
+                      </button>
+                      </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083212.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083212.tsx
new file mode 100644
index 0000000..4319736
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083212.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', 
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+                    <p className="modal_feature">{feature}</p>
+                   {<p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+          <Link href={"/"} as={"/"} scroll={false}>
+            <button className={'yelow button_size_32'} >Закрыть </button>
+          </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083327.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083327.tsx
new file mode 100644
index 0000000..c824229
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083327.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', 
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+          <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+          <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083453.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083453.tsx
new file mode 100644
index 0000000..1fa9f0c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083453.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description';
+const addBasket = () => {
+  console.log(dd);
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083500.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083500.tsx
new file mode 100644
index 0000000..cd97f3b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083500.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description';
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083527.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083527.tsx
new file mode 100644
index 0000000..b499183
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083527.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sun=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={addBasket(e)}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083650.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083650.tsx
new file mode 100644
index 0000000..b499183
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604083650.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sun=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={addBasket(e)}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131550.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131550.tsx
new file mode 100644
index 0000000..6c8b822
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131550.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sun=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131602.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131602.tsx
new file mode 100644
index 0000000..b9e0aed
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131602.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sum=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={' button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131652.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131652.tsx
new file mode 100644
index 0000000..6a09628
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131652.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sum=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={'yelow button_size_32'} >Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131757.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131757.tsx
new file mode 100644
index 0000000..d16b407
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604131757.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sum=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+         
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604171330.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604171330.tsx
new file mode 100644
index 0000000..0b9ab32
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220604171330.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sum=33;
+const addBasket = () => {
+  console.log('add');
+}
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043046.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043046.tsx
new file mode 100644
index 0000000..368a00a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043046.tsx
@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = { id: string | string[] };
+const title='dddd', feature='feature',description='description', sum=33;
+const typeNames = ['тонкое', 'традиционное'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? 'active' : ''}>
+                  {size} см.
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043356.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043356.tsx
new file mode 100644
index 0000000..8a126a4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043356.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[1,2], sizes=[30,40, 50];
+const typeNames = ['тонкое', 'традиционное'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? 'active' : ''}>
+                  {size} см.
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043417.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043417.tsx
new file mode 100644
index 0000000..81f448b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043417.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[0,1], sizes=[30,40, 50];
+const typeNames = ['тонкое', 'традиционное'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? 'active' : ''}>
+                  {size} см.
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043448.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043448.tsx
new file mode 100644
index 0000000..4a71690
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043448.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[0,1], sizes=[30,40, 50];
+const typeNames = ['тонкое тесто', 'традиционное тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? 'active' : ''}>
+                  {size} см.
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043502.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043502.tsx
new file mode 100644
index 0000000..4098297
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043502.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[0,1], sizes=[30,40, 50];
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? 'active' : ''}>
+                  {size} см.
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043527.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043527.tsx
new file mode 100644
index 0000000..25c9763
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615043527.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[0,1], sizes=[30,40, 50];
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? 'active' : ''}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615052903.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615052903.tsx
new file mode 100644
index 0000000..47e7830
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615052903.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[0,1], sizes=[30,40, 50];
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? 'active' : ''}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615053406.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615053406.tsx
new file mode 100644
index 0000000..95d0208
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615053406.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd', feature='feature', description='description', sum=33, types=[0,1], sizes=[30,40, 50];
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615054825.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615054825.tsx
new file mode 100644
index 0000000..a0cd946
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615054825.tsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615054902.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615054902.tsx
new file mode 100644
index 0000000..78c8849
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615054902.tsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055133.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055133.tsx
new file mode 100644
index 0000000..22c40ec
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055133.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+          <Image
+            src={'/assets/img'+id}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055327.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055327.tsx
new file mode 100644
index 0000000..4e78c7b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055327.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+          <Image
+            src={'/assets/img/0'+id}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055433.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055433.tsx
new file mode 100644
index 0000000..1b67563
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055433.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+          <Image
+            src={'/assets/img/'+id}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055441.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055441.tsx
new file mode 100644
index 0000000..0c905aa
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055441.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+          <Image
+            src={'/assets/img/'+id+'.pmg'}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055444.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055444.tsx
new file mode 100644
index 0000000..5ae52f2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055444.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+          <Image
+            src={'/assets/img/'+id+'.png'}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055454.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055454.tsx
new file mode 100644
index 0000000..33ea87a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055454.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          {id}
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055502.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055502.tsx
new file mode 100644
index 0000000..4355921
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055502.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={336}
+            height={336}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055604.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055604.tsx
new file mode 100644
index 0000000..4a17d51
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615055604.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import { RadioButton } from './index';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615060013.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615060013.tsx
new file mode 100644
index 0000000..867ba88
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615060013.tsx
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615060020.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615060020.tsx
new file mode 100644
index 0000000..867ba88
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615060020.tsx
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615062834.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615062834.tsx
new file mode 100644
index 0000000..31de09b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615062834.tsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+import axios from 'axios';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+        const { sortBy, order, category, search, currentPage } = params;
+        const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+          params: pickBy(
+            {
+              page: currentPage,
+              limit: 4,
+              category,
+              sortBy,
+              order,
+              search,
+            },
+            identity,
+          ),
+        });
+    };
+    getData();
+  }, [id]);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615062851.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615062851.tsx
new file mode 100644
index 0000000..59ae0bf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615062851.tsx
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+import axios from 'axios';
+import pickBy from 'lodash/pickBy';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+        const { sortBy, order, category, search, currentPage } = params;
+        const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+          params: pickBy(
+            {
+              page: currentPage,
+              limit: 4,
+              category,
+              sortBy,
+              order,
+              search,
+            },
+            identity,
+          ),
+        });
+    };
+    getData();
+  }, [id]);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615063125.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615063125.tsx
new file mode 100644
index 0000000..53fbb71
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615063125.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+import axios from 'axios';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+        const { sortBy, order, category, search, currentPage } = params;
+        const { data } = await axios.get('/api/loadingPizzaInformation', {
+          params: pickBy(
+            {
+              page: currentPage,
+              limit: 4,
+              category,
+              sortBy,
+              order,
+              search,
+            },
+            identity,
+          ),
+        });
+    };
+    getData();
+  }, [id]);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615064426.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615064426.tsx
new file mode 100644
index 0000000..51234cf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615064426.tsx
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+import axios from 'axios';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+        const { data } = await axios.get('/api/loadingPizzaInformation/'+id);
+        setRows(data);
+    };
+    getData();
+  }, [id]);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615064445.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615064445.tsx
new file mode 100644
index 0000000..4199fdb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615064445.tsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import { Modal, Button } from '../../../../../UI';
+import classNames from 'classnames';
+import axios from 'axios';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+type Props = {
+  id: string | string[];
+ };
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+        const { data } = await axios.get('/api/loadingPizzaInformation/'+id);
+        setRows(data);
+    };
+    getData();
+    console.log(rows);
+  }, [id]);
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160218.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160218.tsx
new file mode 100644
index 0000000..61333ea
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160218.tsx
@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: string | string[];
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160433.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160433.tsx
new file mode 100644
index 0000000..e62ad92
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160433.tsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: string | string[];
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard() );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160611.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160611.tsx
new file mode 100644
index 0000000..c65f359
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160611.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: string | string[];
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard() );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160632.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160632.tsx
new file mode 100644
index 0000000..8429e0d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160632.tsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import console from 'console';
+
+type Props = {
+  id: string | string[];
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard() );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160645.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160645.tsx
new file mode 100644
index 0000000..b4678d2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615160645.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: string | string[];
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard() );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162022.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162022.tsx
new file mode 100644
index 0000000..835d167
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162022.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: string | string[];
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162403.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162403.tsx
new file mode 100644
index 0000000..d283b42
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162403.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: number;
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162842.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162842.tsx
new file mode 100644
index 0000000..23c29ab
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162842.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: number;
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items.title);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162900.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162900.tsx
new file mode 100644
index 0000000..283a752
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162900.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: number;
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items[0].title);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162915.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162915.tsx
new file mode 100644
index 0000000..020f7e9
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162915.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: number;
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items[0]);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162952.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162952.tsx
new file mode 100644
index 0000000..3643d20
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615162952.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { Modal, Button } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+
+type Props = {
+  id: number;
+};
+
+const title='dddd',
+feature='feature',
+description='description',
+sum=33, types=[0,1], sizes=[30,40, 50];
+
+const typeNames = ['традиционное тесто','тонкое тесто'];
+
+const addBasket = () => {
+  console.log('add');
+}
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+  const [activeType, setActiveType] = useState(0);
+  const [activeSize, setActiveSize] = useState(0);
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items[0].name);
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      <div className='modal_body_left'>
+        <div className='modal_img'>
+          <Image
+            src={'/assets/img/'+id+'.jpg'}
+            alt={'pizza'}
+            width={400}
+            height={400}
+            />
+        </div>
+      </div>
+      <div className='modal_body_right'>
+        <div className="modal_header">
+          <h3 className="modal_title">{title}</h3>
+          <p className="modal_feature">{feature}</p>
+          <p className="modal_description">{description}</p>
+          <div className="pizza-block__selector">
+            <ul>
+              {types.map((typeId) => (
+                <li
+                  key={typeId}
+                  onClick={() => setActiveType(typeId)}
+                  className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                  {typeNames[typeId]}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {sizes.map((size, i) => (
+                <li
+                  key={size}
+                  onClick={() => setActiveSize(i)}
+                  className={activeSize === i ? classNames('active size') : classNames('size')}>
+                  {size} см
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className='modal_footer'>
+            <Button styles={'yellow button_size_48'} align={'button_align_center'}
+              onClick={addBasket}>В корзину за {sum} р</Button>
+            <Link href={"/"} as={"/"} scroll={false}>
+              <button className={classNames('yelow button_size_32')}>Закрыть </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615164006.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615164006.tsx
new file mode 100644
index 0000000..721dc33
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615164006.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent img_thin={''} name={''} price={0} size={''} feature={''} key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615164206.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615164206.tsx
new file mode 100644
index 0000000..b934237
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220615164206.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616123755.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616123755.tsx
new file mode 100644
index 0000000..b934237
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616123755.tsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616125926.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616125926.tsx
new file mode 100644
index 0000000..6b8a1f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616125926.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616125948.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616125948.tsx
new file mode 100644
index 0000000..6b8a1f1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616125948.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const [rows, setRows] = useState([]);
+
+  console.log(pizzaToCard_items);
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616132026.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616132026.tsx
new file mode 100644
index 0000000..ae2951e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616132026.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616132034.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616132034.tsx
new file mode 100644
index 0000000..5d515bd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220616132034.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617162344.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617162344.tsx
new file mode 100644
index 0000000..e68bb04
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617162344.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  document.body.style.overflow = "hidden";
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617162450.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617162450.tsx
new file mode 100644
index 0000000..c6c669c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617162450.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: number;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+  
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617190746.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617190746.tsx
new file mode 100644
index 0000000..9473162
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617190746.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617191214.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617191214.tsx
new file mode 100644
index 0000000..4872ebe
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617191214.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI/index';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617191230.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617191230.tsx
new file mode 100644
index 0000000..9473162
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220617191230.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+      {pizza}
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618150953.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618150953.tsx
new file mode 100644
index 0000000..3384472
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618150953.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id="openModal" className={'pizza_modal_card'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151147.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151147.tsx
new file mode 100644
index 0000000..adb67c3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151147.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id="openModal" className={'pizza_modal_card'}>
+            <div className={classNames('dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151400.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151400.tsx
new file mode 100644
index 0000000..e00b73e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151400.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id="openModal" className='pizza_modal_card'>
+            <div className='dialog'>
+                <div className='content'>
+                    <div className='modal_body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151408.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151408.tsx
new file mode 100644
index 0000000..931e811
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151408.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_card'>
+            <div className='dialog'>
+                <div className='content'>
+                    <div className='modal_body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151454.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151454.tsx
new file mode 100644
index 0000000..51f50f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220618151454.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_card'>
+            <div className='dialog'>
+                <div className='content'>
+                    <div className='body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619081333.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619081333.tsx
new file mode 100644
index 0000000..817b551
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619081333.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='fixed-overlay fixed-overlay__modal'>
+            <div className='modal'>
+                <div className='modal_container'>
+                    <div className='body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619081810.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619081810.tsx
new file mode 100644
index 0000000..6de7672
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619081810.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className="dm-overlay">
+        <div className="dm-table">
+            <div className="dm-cell">
+                <div className="dm-modal teal">
+                {pizza}
+                </div>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082020.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082020.tsx
new file mode 100644
index 0000000..0b5f8f4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082020.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className="dm-overlay">
+        <div className="dm-table">
+            <div className="dm-cell">
+                <div className={classNames("dm-modal teal")}>
+                {pizza}
+                </div>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082124.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082124.tsx
new file mode 100644
index 0000000..817b551
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082124.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='fixed-overlay fixed-overlay__modal'>
+            <div className='modal'>
+                <div className='modal_container'>
+                    <div className='body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082141.tsx b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082141.tsx
new file mode 100644
index 0000000..51f50f7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/pizzaCard_20220619082141.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_card'>
+            <div className='dialog'>
+                <div className='content'>
+                    <div className='body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220617111701.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220617111701.scss
new file mode 100644
index 0000000..cbc3864
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220617111701.scss
@@ -0,0 +1,103 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154354.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154354.scss
new file mode 100644
index 0000000..474637a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154354.scss
@@ -0,0 +1,103 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.ingredients_box{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154636.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154636.scss
new file mode 100644
index 0000000..1037de0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154636.scss
@@ -0,0 +1,103 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154701.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154701.scss
new file mode 100644
index 0000000..0d94a81
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618154701.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+    .box{
+        overflow-y: scroll;
+        height: 250px;
+    }
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155338.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155338.scss
new file mode 100644
index 0000000..efe95a0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155338.scss
@@ -0,0 +1,117 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        .ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+    .box{
+        overflow-y: scroll;
+        height: 250px;
+    }
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155530.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155530.scss
new file mode 100644
index 0000000..d516d4d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155530.scss
@@ -0,0 +1,118 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+}
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        .ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+    .box{
+        overflow-y: scroll;
+        height: 250px;
+    }
+
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155544.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155544.scss
new file mode 100644
index 0000000..da91201
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155544.scss
@@ -0,0 +1,118 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        .ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+    .box{
+        overflow-y: scroll;
+        height: 250px;
+    }
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155709.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155709.scss
new file mode 100644
index 0000000..795d545
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155709.scss
@@ -0,0 +1,117 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        .ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+    .box{
+        overflow-y: scroll;
+        height: 250px;
+    }
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155830.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155830.scss
new file mode 100644
index 0000000..1947054
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155830.scss
@@ -0,0 +1,114 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        .ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155843.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155843.scss
new file mode 100644
index 0000000..9da486a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618155843.scss
@@ -0,0 +1,119 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+
+        li {
+            overflow-y: scroll;
+            height: 250px;
+        }
+      }
+
+      @media (min-width: 640px) {
+        .ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160025.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160025.scss
new file mode 100644
index 0000000..e68deeb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160025.scss
@@ -0,0 +1,120 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    height: 250px;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+
+        li {
+            overflow-y: scroll;
+
+        }
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160033.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160033.scss
new file mode 100644
index 0000000..07e47ba
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160033.scss
@@ -0,0 +1,121 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    height: 250px;
+    overflow-y: scroll;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+
+        li {
+            
+
+        }
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160127.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160127.scss
new file mode 100644
index 0000000..8918e45
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160127.scss
@@ -0,0 +1,116 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    height: 250px;
+    overflow-y: scroll;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160228.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160228.scss
new file mode 100644
index 0000000..01e4677
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160228.scss
@@ -0,0 +1,117 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    height: 250px;
+    overflow-y: scroll;
+    list-style-type: none;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160242.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160242.scss
new file mode 100644
index 0000000..bdc65f0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160242.scss
@@ -0,0 +1,120 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    height: 250px;
+    overflow-y: scroll;
+    list-style-type: none;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+      li {
+        list-style-type: none;
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160302.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160302.scss
new file mode 100644
index 0000000..7dcf88d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160302.scss
@@ -0,0 +1,120 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+    height: 250px;
+    overflow-y: scroll;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      li {
+        list-style-type: none;
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160459.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160459.scss
new file mode 100644
index 0000000..6aecbf6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160459.scss
@@ -0,0 +1,118 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      li {
+        list-style-type: none;
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160509.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160509.scss
new file mode 100644
index 0000000..f1d8f8f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160509.scss
@@ -0,0 +1,119 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      li {
+        list-style-type: none;
+        margin: 5px;
+      }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160623.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160623.scss
new file mode 100644
index 0000000..183e487
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160623.scss
@@ -0,0 +1,119 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+        }
+
+      @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+      }
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160815.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160815.scss
new file mode 100644
index 0000000..26e7394
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618160815.scss
@@ -0,0 +1,123 @@
+$color_yellow: #FED11E;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161039.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161039.scss
new file mode 100644
index 0000000..e6b5c50
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161039.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none{
+                background-color: $color_none;
+                height: 32px;
+                padding: 5px 15px 5px 15px;
+              }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161210.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161210.scss
new file mode 100644
index 0000000..9cca5be
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161210.scss
@@ -0,0 +1,128 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none {
+                background-color: $color_none;
+              }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161253.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161253.scss
new file mode 100644
index 0000000..4cff740
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161253.scss
@@ -0,0 +1,134 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none {
+                background-color: $color_none;
+                padding: 5px 15px 5px 15px;
+            }
+
+            .yellow{
+                background-color: $color_yellow;
+                padding: 5px 15px 5px 15px;
+              }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161334.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161334.scss
new file mode 100644
index 0000000..5f3bbda
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161334.scss
@@ -0,0 +1,136 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none {
+                background-color: $color_none;
+                padding: 5px 15px 5px 15px;
+            }
+
+            .yellow{
+                background-color: $color_yellow;
+                padding: 5px 15px 5px 15px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161600.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161600.scss
new file mode 100644
index 0000000..2c4eca6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161600.scss
@@ -0,0 +1,136 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            &.none {
+                background-color: $color_none;
+                padding: 5px 15px 5px 15px;
+            }
+
+            &.yellow{
+                background-color: $color_yellow;
+                padding: 5px 15px 5px 15px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161655.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161655.scss
new file mode 100644
index 0000000..bae7628
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161655.scss
@@ -0,0 +1,136 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            &.none {
+                background-color: $color_none;
+                padding: 5px 15px 5px 15px;
+            }
+
+            &_yellow{
+                background-color: $color_yellow;
+                padding: 5px 15px 5px 15px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161714.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161714.scss
new file mode 100644
index 0000000..12e7c7e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161714.scss
@@ -0,0 +1,136 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            &_none {
+                background-color: $color_none;
+                padding: 5px 15px 5px 15px;
+            }
+
+            &_yellow{
+                background-color: $color_yellow;
+                padding: 5px 15px 5px 15px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161811.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161811.scss
new file mode 100644
index 0000000..df9ede6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618161811.scss
@@ -0,0 +1,136 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none_ing {
+                background-color: $color_none;
+                padding: 5px 15px 5px 15px;
+            }
+
+            .yellow_ing{
+                background-color: $color_yellow;
+                padding: 5px 15px 5px 15px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162317.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162317.scss
new file mode 100644
index 0000000..c9f6fe4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162317.scss
@@ -0,0 +1,137 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none_ing {
+                background-color: $color_none;
+                padding: 5px 5px 5px 5px;
+            }
+
+            .yellow_ing{
+                background-color: $color_yellow;
+                padding: 5px 5px 5px 5px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162440.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162440.scss
new file mode 100644
index 0000000..77741cd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162440.scss
@@ -0,0 +1,138 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none_ing {
+                background-color: $color_none;
+                padding: 5px 5px 5px 5px;
+            }
+
+            .yellow_ing{
+                background-color: $color_yellow;
+                padding: 5px 5px 5px 5px;
+              }
+
+              .img {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162535.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162535.scss
new file mode 100644
index 0000000..84798bb
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162535.scss
@@ -0,0 +1,138 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+            }
+
+            .none_ing {
+                background-color: $color_none;
+                padding: 5px 5px 5px 5px;
+            }
+
+            .yellow_ing{
+                background-color: $color_yellow;
+                padding: 5px 5px 5px 5px;
+              }
+
+              .img_ing {
+                color: rgb(0, 0, 0);
+                height: 52px;
+                width: 52px;
+                margin: 0 auto;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162750.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162750.scss
new file mode 100644
index 0000000..c053c63
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162750.scss
@@ -0,0 +1,142 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing{
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+  
+
+   
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162806.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162806.scss
new file mode 100644
index 0000000..80a70b0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618162806.scss
@@ -0,0 +1,142 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing{
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+  
+
+   
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618174653.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618174653.scss
new file mode 100644
index 0000000..80a70b0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618174653.scss
@@ -0,0 +1,142 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing{
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+   
+
+  
+
+  
+
+   
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202242.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202242.scss
new file mode 100644
index 0000000..3927d12
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202242.scss
@@ -0,0 +1,136 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing{
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202320.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202320.scss
new file mode 100644
index 0000000..5af5a5f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202320.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing{
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202402.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202402.scss
new file mode 100644
index 0000000..397bf2f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202402.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box{
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202504.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202504.scss
new file mode 100644
index 0000000..6c667bd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202504.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                .none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202631.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202631.scss
new file mode 100644
index 0000000..fc5ed0b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202631.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202656.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202656.scss
new file mode 100644
index 0000000..fc80af2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202656.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                &.title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                &.price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                &.button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202707.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202707.scss
new file mode 100644
index 0000000..8f0facf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202707.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202711.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202711.scss
new file mode 100644
index 0000000..fc5ed0b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202711.scss
@@ -0,0 +1,130 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+            }
+        }
+
+      
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202929.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202929.scss
new file mode 100644
index 0000000..a662637
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220618202929.scss
@@ -0,0 +1,102 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+      
+
+    
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_products_20220618202831.scss b/.history/components/customer/pages/index/modals/pizza/styles/_products_20220618202831.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_products_20220618202848.scss b/.history/components/customer/pages/index/modals/pizza/styles/_products_20220618202848.scss
new file mode 100644
index 0000000..b491855
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_products_20220618202848.scss
@@ -0,0 +1,31 @@
+.onion{
+    background: url('/assets/img/onion.png') 100% 100% no-repeat;
+}
+
+.bacon{
+    background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+}
+
+.cheese{
+    background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+}
+
+.jalapeno{
+    background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+}
+
+.mushroom{
+    background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+}
+
+.pickles{
+    background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+}
+
+.pineapple{
+    background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+}
+
+.tomato{
+    background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/block_selector_20220618153310.scss b/.history/components/customer/pages/index/modals/pizza/styles/block_selector_20220618153310.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/block_selector_20220618153802.scss b/.history/components/customer/pages/index/modals/pizza/styles/block_selector_20220618153802.scss
new file mode 100644
index 0000000..e30c5d1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/block_selector_20220618153802.scss
@@ -0,0 +1,58 @@
+.block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &_selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+          }
+        }
+      }
+    }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618153323.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618153323.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154205.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154205.scss
new file mode 100644
index 0000000..38f7d45
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154205.scss
@@ -0,0 +1,154 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+            
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+  
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+
+              @import './block_selector';
+
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154302.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154302.scss
new file mode 100644
index 0000000..939f570
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154302.scss
@@ -0,0 +1,154 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+            
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+  
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154455.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154455.scss
new file mode 100644
index 0000000..2821f99
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618154455.scss
@@ -0,0 +1,154 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              @import './ingredients';
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155352.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155352.scss
new file mode 100644
index 0000000..6a72167
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155352.scss
@@ -0,0 +1,143 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              @import './ingredients';
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155504.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155504.scss
new file mode 100644
index 0000000..ce6f0cd
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155504.scss
@@ -0,0 +1,144 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              
+            }
+            @import './ingredients';
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155509.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155509.scss
new file mode 100644
index 0000000..ff093f2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155509.scss
@@ -0,0 +1,144 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              
+            }
+            
+          }
+        }
+      }
+    }
+    @import './ingredients';
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155512.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155512.scss
new file mode 100644
index 0000000..caa5548
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155512.scss
@@ -0,0 +1,144 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              
+            }
+            
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155515.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155515.scss
new file mode 100644
index 0000000..ff093f2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155515.scss
@@ -0,0 +1,144 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              
+            }
+            
+          }
+        }
+      }
+    }
+    @import './ingredients';
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155548.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155548.scss
new file mode 100644
index 0000000..6a72167
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155548.scss
@@ -0,0 +1,143 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              @import './ingredients';
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155554.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155554.scss
new file mode 100644
index 0000000..a5b55a1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155554.scss
@@ -0,0 +1,143 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import './block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155557.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155557.scss
new file mode 100644
index 0000000..bfaa5c5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618155557.scss
@@ -0,0 +1,143 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+  
+    
+  
+  
+  
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220618202354.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618202354.scss
new file mode 100644
index 0000000..b4a2bf3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220618202354.scss
@@ -0,0 +1,139 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080717.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080717.scss
new file mode 100644
index 0000000..a6e42a8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080717.scss
@@ -0,0 +1,135 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080724.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080724.scss
new file mode 100644
index 0000000..7459c88
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080724.scss
@@ -0,0 +1,136 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  
+    .dialog {
+      margin: 0 auto;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080813.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080813.scss
new file mode 100644
index 0000000..02656a8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619080813.scss
@@ -0,0 +1,137 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619081302.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619081302.scss
new file mode 100644
index 0000000..75f4a9d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619081302.scss
@@ -0,0 +1,165 @@
+.fixed-overlay__modal {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.fixed-overlay__modal::after {
+  display: inline-block;
+  vertical-align: middle;
+  width: 0;
+  height: 100%;
+  content: '';
+}
+
+.modal {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.modal_container {
+  margin: 50px;
+  padding: 20px;
+  min-width: 200px;
+  text-align: left;
+  white-space: normal;
+  background-color: #fff;    
+  color: #000;
+}
+
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619081915.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619081915.scss
new file mode 100644
index 0000000..cffb76a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619081915.scss
@@ -0,0 +1,309 @@
+/* Стили модального окна и содержания 
+-------------------------------------------------------------------------------*/
+
+/* слой затемнения */
+
+.dm-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.65);
+  display: none;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+/* активируем модальное окно */
+
+.dm-overlay:target {
+  display: block;
+  -webkit-animation: fade .6s;
+  -moz-animation: fade .6s;
+  animation: fade .6s;
+}
+/* блочная таблица */
+
+.dm-table {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+/* ячейка блочной таблицы */
+
+.dm-cell {
+  display: table-cell;
+  padding: 0 1em;
+  vertical-align: middle;
+  text-align: center;
+}
+/* модальный блок */
+
+.dm-modal {
+  display: inline-block;
+  padding: 20px;
+  max-width: 50em;
+  background: #607d8b;
+  -webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
+  color: #cfd8dc;
+  text-align: left;
+}
+/* изображения в модальном окне */
+
+.dm-modal img {
+  width: 100%;
+  height: auto;
+}
+/* миниатюры изображений */
+
+.pl-left,
+.pl-right {
+  width: 25%;
+  height: auto;
+}
+/* миниатюра справа */
+
+.pl-right {
+  float: right;
+  margin: 5px 0 5px 15px;
+}
+/* миниатюра слева */
+
+.pl-left {
+  float: left;
+  margin: 5px 15px 5px 0;
+}
+/* встраиваемое видео в модальном окне */
+
+.video {
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+.video iframe,
+.video object,
+.video embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/* рисуем кнопарь закрытия */
+
+.close {
+  z-index: 9999;
+  float: right;
+  width: 30px;
+  height: 30px;
+  color: #cfd8dc;
+  text-align: center;
+  text-decoration: none;
+  line-height: 26px;
+  cursor: pointer;
+}
+.close:after {
+  display: block;
+  border: 2px solid #cfd8dc;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  content: 'X';
+  -webkit-transition: all 0.6s;
+  -moz-transition: all 0.6s;
+  transition: all 0.6s;
+  -webkit-transform: scale(0.85);
+  -moz-transform: scale(0.85);
+  -ms-transform: scale(0.85);
+  transform: scale(0.85);
+}
+/* кнопка закрытия при наведении */
+
+.close:hover:after {
+  border-color: #fff;
+  color: #fff;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+/* варианты фонвой заливки модального блока */
+
+.green {
+  background: #388e3c!important;
+}
+.cyan {
+  background: #0097a7!important;
+}
+.teal {
+  background: #00796b!important;
+}
+/* движуха при появлении блоков с содержанием */
+
+@-moz-keyframes fade {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1
+  }
+}
+@-webkit-keyframes fade {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1
+  }
+}
+@keyframes fade {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1
+  }
+}
+
+
+
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082111.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082111.scss
new file mode 100644
index 0000000..02656a8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082111.scss
@@ -0,0 +1,137 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082249.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082249.scss
new file mode 100644
index 0000000..4cb7629
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082249.scss
@@ -0,0 +1,147 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+      
+      display: inline-block;
+      padding: 20px;
+      max-width: 50em;
+      background: #607d8b;
+      -webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
+      -moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
+      box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
+      color: #cfd8dc;
+      text-align: left;
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082301.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082301.scss
new file mode 100644
index 0000000..c884023
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082301.scss
@@ -0,0 +1,138 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+      
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082507.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082507.scss
new file mode 100644
index 0000000..0fb1a7c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082507.scss
@@ -0,0 +1,138 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      margin: 0 auto;
+      margin-top: 20px;
+      height: 533px;
+      width: 900px;
+      
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .pizza_modal_card {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .pizza_modal_card{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082619.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082619.scss
new file mode 100644
index 0000000..5b085ee
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082619.scss
@@ -0,0 +1,140 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 533px;
+      width: 900px;
+      
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .pizza_modal_card {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .pizza_modal_card{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082822.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082822.scss
new file mode 100644
index 0000000..dd3667d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082822.scss
@@ -0,0 +1,141 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 533px;
+      width: 900px;
+      border-radius: 20px;
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .pizza_modal_card {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .pizza_modal_card{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082939.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082939.scss
new file mode 100644
index 0000000..2276fc1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619082939.scss
@@ -0,0 +1,141 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 533px;
+      width: 900px;
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        border-radius: 20px;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+            margin: 0 auto;
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .pizza_modal_card {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .pizza_modal_card{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/index_20220619083157.scss b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619083157.scss
new file mode 100644
index 0000000..e6d62b0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/index_20220619083157.scss
@@ -0,0 +1,141 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 533px;
+      width: 900px;
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        border-radius: 20px;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+           /* margin: 0 auto;*/
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .pizza_modal_card {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .pizza_modal_card{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/.history/components/customer/search/index_20220518151433.tsx b/.history/components/customer/search/index_20220518151433.tsx
new file mode 100644
index 0000000..7cbd19b
--- /dev/null
+++ b/.history/components/customer/search/index_20220518151433.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};
diff --git a/.history/components/customer/search/index_20220518152152.tsx b/.history/components/customer/search/index_20220518152152.tsx
new file mode 100644
index 0000000..7cbd19b
--- /dev/null
+++ b/.history/components/customer/search/index_20220518152152.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};
diff --git a/.history/components/customer/search/index_20220518152153.tsx b/.history/components/customer/search/index_20220518152153.tsx
new file mode 100644
index 0000000..7cbd19b
--- /dev/null
+++ b/.history/components/customer/search/index_20220518152153.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};
diff --git a/.history/components/index_20220516231522.ts b/.history/components/index_20220516231522.ts
new file mode 100644
index 0000000..64f7c87
--- /dev/null
+++ b/.history/components/index_20220516231522.ts
@@ -0,0 +1 @@
+export * from './Header';
\ No newline at end of file
diff --git a/.history/components/index_20220518134507.ts b/.history/components/index_20220518134507.ts
new file mode 100644
index 0000000..a42c44a
--- /dev/null
+++ b/.history/components/index_20220518134507.ts
@@ -0,0 +1,3 @@
+export * from './Header';
+export * from './Block/Stock/Skeleton';
+export * from './Block/Stock/Stock';
\ No newline at end of file
diff --git a/.history/components/index_20220518142859.ts b/.history/components/index_20220518142859.ts
new file mode 100644
index 0000000..fa93f53
--- /dev/null
+++ b/.history/components/index_20220518142859.ts
@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './Block/Stock/Skeleton';
+export * from './Block/Stock/Stock';
+export * from './Containers/BoxScroll';
\ No newline at end of file
diff --git a/.history/components/index_20220518151422.ts b/.history/components/index_20220518151422.ts
new file mode 100644
index 0000000..1cce4d6
--- /dev/null
+++ b/.history/components/index_20220518151422.ts
@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './Block/Stock/Skeleton';
+export * from './Block/Stock/Stock';
+export * from './Customer/Containers/BoxScroll';
\ No newline at end of file
diff --git a/.history/components/index_20220518151448.ts b/.history/components/index_20220518151448.ts
new file mode 100644
index 0000000..85595dd
--- /dev/null
+++ b/.history/components/index_20220518151448.ts
@@ -0,0 +1,4 @@
+export * from './Customer/Header';
+export * from './Block/Stock/Skeleton';
+export * from './Block/Stock/Stock';
+export * from './Customer/Containers/BoxScroll';
\ No newline at end of file
diff --git a/.history/components/index_20220518151449.ts b/.history/components/index_20220518151449.ts
new file mode 100644
index 0000000..85595dd
--- /dev/null
+++ b/.history/components/index_20220518151449.ts
@@ -0,0 +1,4 @@
+export * from './Customer/Header';
+export * from './Block/Stock/Skeleton';
+export * from './Block/Stock/Stock';
+export * from './Customer/Containers/BoxScroll';
\ No newline at end of file
diff --git a/.history/components/index_20220518151803.ts b/.history/components/index_20220518151803.ts
new file mode 100644
index 0000000..2aec2ab
--- /dev/null
+++ b/.history/components/index_20220518151803.ts
@@ -0,0 +1,4 @@
+export * from './customer/Header';
+export * from './block/Stock/Skeleton';
+export * from './block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
\ No newline at end of file
diff --git a/.history/components/index_20220518152149.ts b/.history/components/index_20220518152149.ts
new file mode 100644
index 0000000..6d953a3
--- /dev/null
+++ b/.history/components/index_20220518152149.ts
@@ -0,0 +1,4 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
\ No newline at end of file
diff --git a/.history/components/index_20220528174627.ts b/.history/components/index_20220528174627.ts
new file mode 100644
index 0000000..34828df
--- /dev/null
+++ b/.history/components/index_20220528174627.ts
@@ -0,0 +1,5 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
\ No newline at end of file
diff --git a/.history/components/index_20220528224437.ts b/.history/components/index_20220528224437.ts
new file mode 100644
index 0000000..6037292
--- /dev/null
+++ b/.history/components/index_20220528224437.ts
@@ -0,0 +1,6 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
\ No newline at end of file
diff --git a/.history/components/index_20220528234800.ts b/.history/components/index_20220528234800.ts
new file mode 100644
index 0000000..c2740fb
--- /dev/null
+++ b/.history/components/index_20220528234800.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export 
\ No newline at end of file
diff --git a/.history/components/index_20220528234806.ts b/.history/components/index_20220528234806.ts
new file mode 100644
index 0000000..79537fb
--- /dev/null
+++ b/.history/components/index_20220528234806.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './'
\ No newline at end of file
diff --git a/.history/components/index_20220528234807.ts b/.history/components/index_20220528234807.ts
new file mode 100644
index 0000000..5fe6882
--- /dev/null
+++ b/.history/components/index_20220528234807.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/'
\ No newline at end of file
diff --git a/.history/components/index_20220528234810.ts b/.history/components/index_20220528234810.ts
new file mode 100644
index 0000000..17fc8d3
--- /dev/null
+++ b/.history/components/index_20220528234810.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton'
\ No newline at end of file
diff --git a/.history/components/index_20220528234811.ts b/.history/components/index_20220528234811.ts
new file mode 100644
index 0000000..1e482aa
--- /dev/null
+++ b/.history/components/index_20220528234811.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
\ No newline at end of file
diff --git a/.history/components/index_20220529001231.ts b/.history/components/index_20220529001231.ts
new file mode 100644
index 0000000..aa8a894
--- /dev/null
+++ b/.history/components/index_20220529001231.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export #
\ No newline at end of file
diff --git a/.history/components/index_20220529001233.ts b/.history/components/index_20220529001233.ts
new file mode 100644
index 0000000..660df72
--- /dev/null
+++ b/.history/components/index_20220529001233.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export 
\ No newline at end of file
diff --git a/.history/components/index_20220529001238.ts b/.history/components/index_20220529001238.ts
new file mode 100644
index 0000000..4b85ec1
--- /dev/null
+++ b/.history/components/index_20220529001238.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from ;
\ No newline at end of file
diff --git a/.history/components/index_20220529001241.ts b/.history/components/index_20220529001241.ts
new file mode 100644
index 0000000..5c35e6f
--- /dev/null
+++ b/.history/components/index_20220529001241.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './'
\ No newline at end of file
diff --git a/.history/components/index_20220529001242.ts b/.history/components/index_20220529001242.ts
new file mode 100644
index 0000000..0f2bfb5
--- /dev/null
+++ b/.history/components/index_20220529001242.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/'
\ No newline at end of file
diff --git a/.history/components/index_20220529001254.ts b/.history/components/index_20220529001254.ts
new file mode 100644
index 0000000..4fb76a0
--- /dev/null
+++ b/.history/components/index_20220529001254.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from '.'
\ No newline at end of file
diff --git a/.history/components/index_20220529001259.ts b/.history/components/index_20220529001259.ts
new file mode 100644
index 0000000..1e482aa
--- /dev/null
+++ b/.history/components/index_20220529001259.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
\ No newline at end of file
diff --git a/.history/components/index_20220529002438.ts b/.history/components/index_20220529002438.ts
new file mode 100644
index 0000000..d42d85e
--- /dev/null
+++ b/.history/components/index_20220529002438.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+ecport 
\ No newline at end of file
diff --git a/.history/components/index_20220529002440.ts b/.history/components/index_20220529002440.ts
new file mode 100644
index 0000000..9c2ea64
--- /dev/null
+++ b/.history/components/index_20220529002440.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+ecport * from 
\ No newline at end of file
diff --git a/.history/components/index_20220529002445.ts b/.history/components/index_20220529002445.ts
new file mode 100644
index 0000000..519bdd7
--- /dev/null
+++ b/.history/components/index_20220529002445.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from 
\ No newline at end of file
diff --git a/.history/components/index_20220529002448.ts b/.history/components/index_20220529002448.ts
new file mode 100644
index 0000000..4807e80
--- /dev/null
+++ b/.history/components/index_20220529002448.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from  './'
\ No newline at end of file
diff --git a/.history/components/index_20220529002450.ts b/.history/components/index_20220529002450.ts
new file mode 100644
index 0000000..1a73973
--- /dev/null
+++ b/.history/components/index_20220529002450.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from  './customer/'
\ No newline at end of file
diff --git a/.history/components/index_20220529002453.ts b/.history/components/index_20220529002453.ts
new file mode 100644
index 0000000..55641cc
--- /dev/null
+++ b/.history/components/index_20220529002453.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from  './customer/containers/Box'
\ No newline at end of file
diff --git a/.history/components/index_20220529002455.ts b/.history/components/index_20220529002455.ts
new file mode 100644
index 0000000..86ce080
--- /dev/null
+++ b/.history/components/index_20220529002455.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from  './customer/containers/Box';
\ No newline at end of file
diff --git a/.history/components/index_20220529002457.ts b/.history/components/index_20220529002457.ts
new file mode 100644
index 0000000..c2c0146
--- /dev/null
+++ b/.history/components/index_20220529002457.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
\ No newline at end of file
diff --git a/.history/components/index_20220529002459.ts b/.history/components/index_20220529002459.ts
new file mode 100644
index 0000000..c2c0146
--- /dev/null
+++ b/.history/components/index_20220529002459.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
\ No newline at end of file
diff --git a/.history/components/index_20220529004037.ts b/.history/components/index_20220529004037.ts
new file mode 100644
index 0000000..000df28
--- /dev/null
+++ b/.history/components/index_20220529004037.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export 
\ No newline at end of file
diff --git a/.history/components/index_20220529004044.ts b/.history/components/index_20220529004044.ts
new file mode 100644
index 0000000..c41c56b
--- /dev/null
+++ b/.history/components/index_20220529004044.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './'
\ No newline at end of file
diff --git a/.history/components/index_20220529004046.ts b/.history/components/index_20220529004046.ts
new file mode 100644
index 0000000..e136dac
--- /dev/null
+++ b/.history/components/index_20220529004046.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/'
\ No newline at end of file
diff --git a/.history/components/index_20220529004049.ts b/.history/components/index_20220529004049.ts
new file mode 100644
index 0000000..a036535
--- /dev/null
+++ b/.history/components/index_20220529004049.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/'
\ No newline at end of file
diff --git a/.history/components/index_20220529004051.ts b/.history/components/index_20220529004051.ts
new file mode 100644
index 0000000..2c83200
--- /dev/null
+++ b/.history/components/index_20220529004051.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza'
\ No newline at end of file
diff --git a/.history/components/index_20220529004052.ts b/.history/components/index_20220529004052.ts
new file mode 100644
index 0000000..2c83200
--- /dev/null
+++ b/.history/components/index_20220529004052.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza'
\ No newline at end of file
diff --git a/.history/components/index_20220529004103.ts b/.history/components/index_20220529004103.ts
new file mode 100644
index 0000000..4b50d7f
--- /dev/null
+++ b/.history/components/index_20220529004103.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza'
\ No newline at end of file
diff --git a/.history/components/index_20220529004108.ts b/.history/components/index_20220529004108.ts
new file mode 100644
index 0000000..2c83200
--- /dev/null
+++ b/.history/components/index_20220529004108.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza'
\ No newline at end of file
diff --git a/.history/components/index_20220529145327.ts b/.history/components/index_20220529145327.ts
new file mode 100644
index 0000000..f169f35
--- /dev/null
+++ b/.history/components/index_20220529145327.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/Block'
\ No newline at end of file
diff --git a/.history/components/index_20220529145843.ts b/.history/components/index_20220529145843.ts
new file mode 100644
index 0000000..7d736f2
--- /dev/null
+++ b/.history/components/index_20220529145843.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/Block';
\ No newline at end of file
diff --git a/.history/components/index_20220529145850.ts b/.history/components/index_20220529145850.ts
new file mode 100644
index 0000000..418cb54
--- /dev/null
+++ b/.history/components/index_20220529145850.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/';
\ No newline at end of file
diff --git a/.history/components/index_20220529145854.ts b/.history/components/index_20220529145854.ts
new file mode 100644
index 0000000..418cb54
--- /dev/null
+++ b/.history/components/index_20220529145854.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/';
\ No newline at end of file
diff --git a/.history/components/index_20220529145858.ts b/.history/components/index_20220529145858.ts
new file mode 100644
index 0000000..418cb54
--- /dev/null
+++ b/.history/components/index_20220529145858.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/';
\ No newline at end of file
diff --git a/.history/components/index_20220529145900.ts b/.history/components/index_20220529145900.ts
new file mode 100644
index 0000000..86a9554
--- /dev/null
+++ b/.history/components/index_20220529145900.ts
@@ -0,0 +1,9 @@
+export * from './customer/Header';
+export * from './customer/block/Stock/Skeleton';
+export * from './customer/block/Stock/Stock';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/index';
\ No newline at end of file
diff --git a/.history/components/index_20220530190051.ts b/.history/components/index_20220530190051.ts
new file mode 100644
index 0000000..80b6cdf
--- /dev/null
+++ b/.history/components/index_20220530190051.ts
@@ -0,0 +1,8 @@
+export * from './customer/Header';
+
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/index';
\ No newline at end of file
diff --git a/.history/components/index_20220530190052.ts b/.history/components/index_20220530190052.ts
new file mode 100644
index 0000000..d02a275
--- /dev/null
+++ b/.history/components/index_20220530190052.ts
@@ -0,0 +1,7 @@
+export * from './customer/Header';
+export * from './customer/containers/BoxScroll';
+export * from './customer/block/Motto/Index';
+export * from './customer/block/Categories/Categories';
+export * from './customer/block/Categories/Skeleton';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/index';
\ No newline at end of file
diff --git a/.history/components/index_20220530190056.ts b/.history/components/index_20220530190056.ts
new file mode 100644
index 0000000..c824079
--- /dev/null
+++ b/.history/components/index_20220530190056.ts
@@ -0,0 +1,5 @@
+export * from './customer/Header';
+export * from './customer/containers/BoxScroll';
+
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/index';
\ No newline at end of file
diff --git a/.history/components/index_20220530190057.ts b/.history/components/index_20220530190057.ts
new file mode 100644
index 0000000..1bce048
--- /dev/null
+++ b/.history/components/index_20220530190057.ts
@@ -0,0 +1,4 @@
+export * from './customer/Header';
+export * from './customer/containers/BoxScroll';
+export * from './customer/containers/Box';
+export * from './customer/block/Pizza/index';
\ No newline at end of file
diff --git a/.history/components/index_20220530190059.ts b/.history/components/index_20220530190059.ts
new file mode 100644
index 0000000..7d5a274
--- /dev/null
+++ b/.history/components/index_20220530190059.ts
@@ -0,0 +1,3 @@
+export * from './customer/Header';
+export * from './customer/containers/BoxScroll';
+export * from './customer/containers/Box';
\ No newline at end of file
diff --git a/.history/components/index_20220530190104.ts b/.history/components/index_20220530190104.ts
new file mode 100644
index 0000000..7d5a274
--- /dev/null
+++ b/.history/components/index_20220530190104.ts
@@ -0,0 +1,3 @@
+export * from './customer/Header';
+export * from './customer/containers/BoxScroll';
+export * from './customer/containers/Box';
\ No newline at end of file
diff --git a/.history/components/index_20220530192732.ts b/.history/components/index_20220530192732.ts
new file mode 100644
index 0000000..28f0d38
--- /dev/null
+++ b/.history/components/index_20220530192732.ts
@@ -0,0 +1,2 @@
+export * from './customer/containers/BoxScroll';
+export * from './customer/containers/Box';
\ No newline at end of file
diff --git a/.history/import React from 'react';_20220601152621.tsx b/.history/import React from 'react';_20220601152621.tsx
new file mode 100644
index 0000000..9a4bcb8
--- /dev/null
+++ b/.history/import React from 'react';_20220601152621.tsx	
@@ -0,0 +1,40 @@
+import React from 'react';
+import Image from 'next/image';
+import { Modal } from '../../../../../UI'
+
+type Props = { children: React.ReactNode };
+
+export const PizzaCard: React.FC<Props> = ({children}) => {
+  return (
+    <Modal styles={'modal_product'} position={'position_product'}>
+            <div className='modal_body_left'>
+                <div className='modal_img'>
+                    {//informationPizza.length ?
+                    <Image
+                        src={'/'+pizzaImg}
+                        alt={informationPizza[0].description}
+                        width={336}
+                        height={336}
+                    /> //: '...'
+                    }
+                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
+                </div>
+            </div>
+            <div className='modal_body_right'>
+                <div className="modal_header">
+                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
+                    <p className="modal_feature">{feature}</p>
+                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
+                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
+                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
+                    <div className='modal_footer'>
+                        <Button styles={'yellow button_size_48'}
+                            align={' button_align_center'}
+                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220517162459.tsx b/.history/layouts/Customer/MainLayout_20220517162459.tsx
new file mode 100644
index 0000000..4e6db1e
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220517162459.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220518151334.tsx b/.history/layouts/Customer/MainLayout_20220518151334.tsx
new file mode 100644
index 0000000..4e6db1e
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220518151334.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220518151351.tsx b/.history/layouts/Customer/MainLayout_20220518151351.tsx
new file mode 100644
index 0000000..13e9447
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220518151351.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152347.tsx b/.history/layouts/Customer/MainLayout_20220529152347.tsx
new file mode 100644
index 0000000..b895efc
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152347.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152359.tsx b/.history/layouts/Customer/MainLayout_20220529152359.tsx
new file mode 100644
index 0000000..13e9447
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152359.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152400.tsx b/.history/layouts/Customer/MainLayout_20220529152400.tsx
new file mode 100644
index 0000000..a146fca
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152400.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152406.tsx b/.history/layouts/Customer/MainLayout_20220529152406.tsx
new file mode 100644
index 0000000..13e9447
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152406.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152442.tsx b/.history/layouts/Customer/MainLayout_20220529152442.tsx
new file mode 100644
index 0000000..e81a581
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152442.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Header } from '../../components';
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
diff --git a/.history/layouts/Customer/MainLayout_20220529152444.tsx b/.history/layouts/Customer/MainLayout_20220529152444.tsx
new file mode 100644
index 0000000..8085bd4
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152444.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header } from '../../components';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
diff --git a/.history/layouts/Customer/MainLayout_20220529152446.tsx b/.history/layouts/Customer/MainLayout_20220529152446.tsx
new file mode 100644
index 0000000..110e0b7
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152446.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152522.tsx b/.history/layouts/Customer/MainLayout_20220529152522.tsx
new file mode 100644
index 0000000..843ace6
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152522.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+     
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529152911.tsx b/.history/layouts/Customer/MainLayout_20220529152911.tsx
new file mode 100644
index 0000000..110e0b7
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529152911.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529153148.tsx b/.history/layouts/Customer/MainLayout_20220529153148.tsx
new file mode 100644
index 0000000..51a52f2
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529153148.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrappe">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220529153155.tsx b/.history/layouts/Customer/MainLayout_20220529153155.tsx
new file mode 100644
index 0000000..110e0b7
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220529153155.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192706.tsx b/.history/layouts/Customer/MainLayout_20220530192706.tsx
new file mode 100644
index 0000000..130bffe
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192706.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components/';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192709.tsx b/.history/layouts/Customer/MainLayout_20220530192709.tsx
new file mode 100644
index 0000000..be7c01a
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192709.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components/customer/';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192712.tsx b/.history/layouts/Customer/MainLayout_20220530192712.tsx
new file mode 100644
index 0000000..fbad289
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192712.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192713.tsx b/.history/layouts/Customer/MainLayout_20220530192713.tsx
new file mode 100644
index 0000000..fbad289
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192713.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192718.tsx b/.history/layouts/Customer/MainLayout_20220530192718.tsx
new file mode 100644
index 0000000..760cfe0
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192718.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192720.tsx b/.history/layouts/Customer/MainLayout_20220530192720.tsx
new file mode 100644
index 0000000..08cf6e3
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192720.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192727.tsx b/.history/layouts/Customer/MainLayout_20220530192727.tsx
new file mode 100644
index 0000000..760cfe0
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192727.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530192842.tsx b/.history/layouts/Customer/MainLayout_20220530192842.tsx
new file mode 100644
index 0000000..fbad289
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530192842.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193153.tsx b/.history/layouts/Customer/MainLayout_20220530193153.tsx
new file mode 100644
index 0000000..94328f9
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193153.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header, F } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193158.tsx b/.history/layouts/Customer/MainLayout_20220530193158.tsx
new file mode 100644
index 0000000..8c09115
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193158.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header, Footer, N } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193159.tsx b/.history/layouts/Customer/MainLayout_20220530193159.tsx
new file mode 100644
index 0000000..8318ac1
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193159.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193221.tsx b/.history/layouts/Customer/MainLayout_20220530193221.tsx
new file mode 100644
index 0000000..5a53141
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193221.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193223.tsx b/.history/layouts/Customer/MainLayout_20220530193223.tsx
new file mode 100644
index 0000000..91d26ae
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193223.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193227.tsx b/.history/layouts/Customer/MainLayout_20220530193227.tsx
new file mode 100644
index 0000000..9251c4b
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193227.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <Nav></Nav>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193235.tsx b/.history/layouts/Customer/MainLayout_20220530193235.tsx
new file mode 100644
index 0000000..a059278
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193235.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <Nav/>
+      
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193237.tsx b/.history/layouts/Customer/MainLayout_20220530193237.tsx
new file mode 100644
index 0000000..2a78ef7
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193237.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <Nav/>
+      <Footer
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193239.tsx b/.history/layouts/Customer/MainLayout_20220530193239.tsx
new file mode 100644
index 0000000..f290ccf
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193239.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, Nav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <Nav/>
+      <Footer/>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193627.tsx b/.history/layouts/Customer/MainLayout_20220530193627.tsx
new file mode 100644
index 0000000..95f71b9
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193627.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <Nav/>
+      <Footer/>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530193630.tsx b/.history/layouts/Customer/MainLayout_20220530193630.tsx
new file mode 100644
index 0000000..2e08308
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530193630.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      </div>
+      <FooterNav/>
+      <Footer/>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530194419.tsx b/.history/layouts/Customer/MainLayout_20220530194419.tsx
new file mode 100644
index 0000000..39babb3
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530194419.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      
+      <FooterNav/>
+      <Footer/>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530194421.tsx b/.history/layouts/Customer/MainLayout_20220530194421.tsx
new file mode 100644
index 0000000..0270cce
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530194421.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      
+      <FooterNav/>
+      <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530194423.tsx b/.history/layouts/Customer/MainLayout_20220530194423.tsx
new file mode 100644
index 0000000..b14288f
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530194423.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+      
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220530194425.tsx b/.history/layouts/Customer/MainLayout_20220530194425.tsx
new file mode 100644
index 0000000..b1cad44
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220530194425.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140844.tsx b/.history/layouts/Customer/MainLayout_20220531140844.tsx
new file mode 100644
index 0000000..7ab1486
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140844.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import {}
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140845.tsx b/.history/layouts/Customer/MainLayout_20220531140845.tsx
new file mode 100644
index 0000000..08e484f
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140845.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } 
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140847.tsx b/.history/layouts/Customer/MainLayout_20220531140847.tsx
new file mode 100644
index 0000000..6a83dd2
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140847.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } from 
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140850.tsx b/.history/layouts/Customer/MainLayout_20220531140850.tsx
new file mode 100644
index 0000000..49e32be
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140850.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } from '../../'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140851.tsx b/.history/layouts/Customer/MainLayout_20220531140851.tsx
new file mode 100644
index 0000000..32102b5
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140851.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } from '../../components'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140852.tsx b/.history/layouts/Customer/MainLayout_20220531140852.tsx
new file mode 100644
index 0000000..7d92988
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140852.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } from '../../components/'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140854.tsx b/.history/layouts/Customer/MainLayout_20220531140854.tsx
new file mode 100644
index 0000000..48f8a31
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140854.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } from '../../components/customer/'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140944.tsx b/.history/layouts/Customer/MainLayout_20220531140944.tsx
new file mode 100644
index 0000000..d3e34b7
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140944.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140949.tsx b/.history/layouts/Customer/MainLayout_20220531140949.tsx
new file mode 100644
index 0000000..e4c87a7
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140949.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531140959.tsx b/.history/layouts/Customer/MainLayout_20220531140959.tsx
new file mode 100644
index 0000000..326dc35
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531140959.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box></Box>
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141002.tsx b/.history/layouts/Customer/MainLayout_20220531141002.tsx
new file mode 100644
index 0000000..d5b1cb9
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141002.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box></Box>
+        
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141003.tsx b/.history/layouts/Customer/MainLayout_20220531141003.tsx
new file mode 100644
index 0000000..32f66df
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141003.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box><FooterNav/></Box>
+        
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141006.tsx b/.history/layouts/Customer/MainLayout_20220531141006.tsx
new file mode 100644
index 0000000..3b269b8
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141006.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box><FooterNav/></Box>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141008.tsx b/.history/layouts/Customer/MainLayout_20220531141008.tsx
new file mode 100644
index 0000000..98b9c44
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141008.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box>
+          <FooterNav/></Box>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141010.tsx b/.history/layouts/Customer/MainLayout_20220531141010.tsx
new file mode 100644
index 0000000..02d21e9
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141010.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { Box } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box>
+          <FooterNav/>
+        </Box>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141122.tsx b/.history/layouts/Customer/MainLayout_20220531141122.tsx
new file mode 100644
index 0000000..81d274e
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141122.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <Box>
+          <FooterNav/>
+        </Box>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141123.tsx b/.history/layouts/Customer/MainLayout_20220531141123.tsx
new file mode 100644
index 0000000..d5ca7fe
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141123.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <ContainerInside>
+          <FooterNav/>
+        </ContainerInside>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141124.tsx b/.history/layouts/Customer/MainLayout_20220531141124.tsx
new file mode 100644
index 0000000..d5ca7fe
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141124.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <ContainerInside>
+          <FooterNav/>
+        </ContainerInside>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141340.tsx b/.history/layouts/Customer/MainLayout_20220531141340.tsx
new file mode 100644
index 0000000..a6bc4c4
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141340.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+          <FooterNav/>
+        </ContainerInside>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141343.tsx b/.history/layouts/Customer/MainLayout_20220531141343.tsx
new file mode 100644
index 0000000..18e34e8
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141343.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+          <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531141345.tsx b/.history/layouts/Customer/MainLayout_20220531141345.tsx
new file mode 100644
index 0000000..1a49be4
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531141345.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531162101.tsx b/.history/layouts/Customer/MainLayout_20220531162101.tsx
new file mode 100644
index 0000000..18a2ae4
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531162101.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/Pages/Index/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531162131.tsx b/.history/layouts/Customer/MainLayout_20220531162131.tsx
new file mode 100644
index 0000000..d1038db
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531162131.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/pages/Index/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531162144.tsx b/.history/layouts/Customer/MainLayout_20220531162144.tsx
new file mode 100644
index 0000000..fefaaff
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531162144.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/pages/index/block';
+import { ContainerInside } from '../../components/customer/containers'
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/layouts/Customer/MainLayout_20220531215838.tsx b/.history/layouts/Customer/MainLayout_20220531215838.tsx
new file mode 100644
index 0000000..af0bc0b
--- /dev/null
+++ b/.history/layouts/Customer/MainLayout_20220531215838.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/pages/index/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/lib/session_20220525193012.ts b/.history/lib/session_20220525193012.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/lib/session_20220525193024.js b/.history/lib/session_20220525193024.js
new file mode 100644
index 0000000..5e8f2e6
--- /dev/null
+++ b/.history/lib/session_20220525193024.js
@@ -0,0 +1,39 @@
+async function getAuthSession(ctx) {
+    return ctx.req.session.get("user");
+  }
+  
+  // pages/protected/protected-route.js
+  const ProtectedSSRoute = ({ authenticated, user }) => {
+    if (!authenticated) {
+      return (
+        <div>
+          <span>You are not authenticated :(</span>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <span>You are authenticated as: {user} :)</span>
+      </div>
+    );
+  };
+  
+  export function getServerSideProps(ctx) {
+    const authSession = getAuthSession(ctx);
+    if (!authSession) {
+      return {
+        props: {
+          authenticated: false,
+        },
+      };
+    }
+  
+    return {
+      props: {
+        authenticated: true,
+        user: authSession.user,
+      },
+    };
+  }
+  
+  export default ProtectedSSRoute;
\ No newline at end of file
diff --git a/.history/lib/session_20220525193025.ts b/.history/lib/session_20220525193025.ts
new file mode 100644
index 0000000..5e8f2e6
--- /dev/null
+++ b/.history/lib/session_20220525193025.ts
@@ -0,0 +1,39 @@
+async function getAuthSession(ctx) {
+    return ctx.req.session.get("user");
+  }
+  
+  // pages/protected/protected-route.js
+  const ProtectedSSRoute = ({ authenticated, user }) => {
+    if (!authenticated) {
+      return (
+        <div>
+          <span>You are not authenticated :(</span>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <span>You are authenticated as: {user} :)</span>
+      </div>
+    );
+  };
+  
+  export function getServerSideProps(ctx) {
+    const authSession = getAuthSession(ctx);
+    if (!authSession) {
+      return {
+        props: {
+          authenticated: false,
+        },
+      };
+    }
+  
+    return {
+      props: {
+        authenticated: true,
+        user: authSession.user,
+      },
+    };
+  }
+  
+  export default ProtectedSSRoute;
\ No newline at end of file
diff --git a/.history/lib/session_20220525193045.js b/.history/lib/session_20220525193045.js
new file mode 100644
index 0000000..3585dee
--- /dev/null
+++ b/.history/lib/session_20220525193045.js
@@ -0,0 +1,39 @@
+async function getAuthSession(ctx) {
+    return ctx.req.session.get("user");
+  }
+
+  // pages/protected/protected-route.js
+  const ProtectedSSRoute = ({ authenticated, user }) => {
+    if (!authenticated) {
+      return (
+        <div>
+          <span>You are not authenticated :(</span>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <span>You are authenticated as: {user} :)</span>
+      </div>
+    );
+  };
+
+  export function getServerSideProps(ctx) {
+    const authSession = getAuthSession(ctx);
+    if (!authSession) {
+      return {
+        props: {
+          authenticated: false,
+        },
+      };
+    }
+
+    return {
+      props: {
+        authenticated: true,
+        user: authSession.user,
+      },
+    };
+  }
+
+  export default ProtectedSSRoute;
\ No newline at end of file
diff --git a/.history/next.config_20220516191522.js b/.history/next.config_20220516191522.js
new file mode 100644
index 0000000..a843cbe
--- /dev/null
+++ b/.history/next.config_20220516191522.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/.history/next.config_20220522161622.js b/.history/next.config_20220522161622.js
new file mode 100644
index 0000000..a843cbe
--- /dev/null
+++ b/.history/next.config_20220522161622.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/.history/next_20220522160938.js b/.history/next_20220522160938.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/next_20220522160948.js b/.history/next_20220522160948.js
new file mode 100644
index 0000000..b4fe0fd
--- /dev/null
+++ b/.history/next_20220522160948.js
@@ -0,0 +1,4 @@
+Router.push({
+    pathname: '/home',
+    query: { name: 'Someone' }
+})
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160739.tsx b/.history/pages/[pizza]_20220602160739.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/[pizza]_20220602160900.tsx b/.history/pages/[pizza]_20220602160900.tsx
new file mode 100644
index 0000000..7806e82
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160900.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC<Props> = () => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                       
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160901.tsx b/.history/pages/[pizza]_20220602160901.tsx
new file mode 100644
index 0000000..7806e82
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160901.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC<Props> = () => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                       
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160907.tsx b/.history/pages/[pizza]_20220602160907.tsx
new file mode 100644
index 0000000..788d9ab
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160907.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                       dfdfdfdf
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160908.tsx b/.history/pages/[pizza]_20220602160908.tsx
new file mode 100644
index 0000000..788d9ab
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160908.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                       dfdfdfdf
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160923.tsx b/.history/pages/[pizza]_20220602160923.tsx
new file mode 100644
index 0000000..0cdbdef
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160923.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                       dfdfdfdf
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160924.tsx b/.history/pages/[pizza]_20220602160924.tsx
new file mode 100644
index 0000000..0cdbdef
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160924.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                       dfdfdfdf
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602160945.tsx b/.history/pages/[pizza]_20220602160945.tsx
new file mode 100644
index 0000000..638b712
--- /dev/null
+++ b/.history/pages/[pizza]_20220602160945.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter()
+    const { pid } = router.query
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {pid}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602161903.tsx b/.history/pages/[pizza]_20220602161903.tsx
new file mode 100644
index 0000000..b649958
--- /dev/null
+++ b/.history/pages/[pizza]_20220602161903.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { id } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {id}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602163621.tsx b/.history/pages/[pizza]_20220602163621.tsx
new file mode 100644
index 0000000..70e1dc8
--- /dev/null
+++ b/.history/pages/[pizza]_20220602163621.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220602163622.tsx b/.history/pages/[pizza]_20220602163622.tsx
new file mode 100644
index 0000000..70e1dc8
--- /dev/null
+++ b/.history/pages/[pizza]_20220602163622.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220604155359.tsx b/.history/pages/[pizza]_20220604155359.tsx
new file mode 100644
index 0000000..3fe29bb
--- /dev/null
+++ b/.history/pages/[pizza]_20220604155359.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                    <p>Post: {pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220604155400.tsx b/.history/pages/[pizza]_20220604155400.tsx
new file mode 100644
index 0000000..3fe29bb
--- /dev/null
+++ b/.history/pages/[pizza]_20220604155400.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                    <p>Post: {pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/[pizza]_20220615055808.tsx b/.history/pages/[pizza]_20220615055808.tsx
new file mode 100644
index 0000000..0583340
--- /dev/null
+++ b/.history/pages/[pizza]_20220615055808.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                    <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/_app_20220517150042.tsx b/.history/pages/_app_20220517150042.tsx
new file mode 100644
index 0000000..cf1e7b0
--- /dev/null
+++ b/.history/pages/_app_20220517150042.tsx
@@ -0,0 +1,17 @@
+import '../styles/globals.scss';
+import type { AppProps } from 'next/app';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false
+import { store } from '../redux/store';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (  <Provider store={store}>
+              <Component {...pageProps} />
+            </Provider>
+          )
+}
+
+export default MyApp
diff --git a/.history/pages/_app_20220518125856.tsx b/.history/pages/_app_20220518125856.tsx
new file mode 100644
index 0000000..ad1d29e
--- /dev/null
+++ b/.history/pages/_app_20220518125856.tsx
@@ -0,0 +1,16 @@
+import '../styles/globals.scss';
+import type { AppProps } from 'next/app';
+import { Provider } from 'react-redux';
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false
+import { store } from '../redux/store';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (  <Provider store={store}>
+              <Component {...pageProps} />
+            </Provider>
+          )
+}
+
+export default MyApp
diff --git a/.history/pages/_app_20220518143444.tsx b/.history/pages/_app_20220518143444.tsx
new file mode 100644
index 0000000..dd1c823
--- /dev/null
+++ b/.history/pages/_app_20220518143444.tsx
@@ -0,0 +1,17 @@
+import '../styles/globals.scss';
+import type { AppProps } from 'next/app';
+import { Provider } from 'react-redux';
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false;
+require('dotenv').config();
+import { store } from '../redux/store';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (  <Provider store={store}>
+              <Component {...pageProps} />
+            </Provider>
+          )
+}
+
+export default MyApp
diff --git a/.history/pages/_app_20220518143835.tsx b/.history/pages/_app_20220518143835.tsx
new file mode 100644
index 0000000..c27ea98
--- /dev/null
+++ b/.history/pages/_app_20220518143835.tsx
@@ -0,0 +1,16 @@
+import '../styles/globals.scss';
+import type { AppProps } from 'next/app';
+import { Provider } from 'react-redux';
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false;
+import { store } from '../redux/store';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (  <Provider store={store}>
+              <Component {...pageProps} />
+            </Provider>
+          )
+}
+
+export default MyApp
diff --git a/.history/pages/admin/Login_20220522081533.tsx b/.history/pages/admin/Login_20220522081533.tsx
new file mode 100644
index 0000000..90a8d00
--- /dev/null
+++ b/.history/pages/admin/Login_20220522081533.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from './Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/pages/admin/Login_20220522155931.tsx b/.history/pages/admin/Login_20220522155931.tsx
new file mode 100644
index 0000000..865b8ab
--- /dev/null
+++ b/.history/pages/admin/Login_20220522155931.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from '../../components/admin/pages/login/Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/pages/admin/Login_20220522155934.tsx b/.history/pages/admin/Login_20220522155934.tsx
new file mode 100644
index 0000000..865b8ab
--- /dev/null
+++ b/.history/pages/admin/Login_20220522155934.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from '../../components/admin/pages/login/Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/.history/pages/admin/Main_20220522160009.tsx b/.history/pages/admin/Main_20220522160009.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/admin/Main_20220522160106.tsx b/.history/pages/admin/Main_20220522160106.tsx
new file mode 100644
index 0000000..3ba495d
--- /dev/null
+++ b/.history/pages/admin/Main_20220522160106.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from '../../components/admin/pages/login/Index';
+
+export const Main: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+            Main
+        </div>
+    </div>
+    )
+}
+
+export default Main;
diff --git a/.history/pages/admin/index_20220522155755.tsx b/.history/pages/admin/index_20220522155755.tsx
new file mode 100644
index 0000000..5be7d5d
--- /dev/null
+++ b/.history/pages/admin/index_20220522155755.tsx
@@ -0,0 +1,22 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522155840.tsx b/.history/pages/admin/index_20220522155840.tsx
new file mode 100644
index 0000000..29c095c
--- /dev/null
+++ b/.history/pages/admin/index_20220522155840.tsx
@@ -0,0 +1,22 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from '../../components/admin/pages/login/Login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522155932.tsx b/.history/pages/admin/index_20220522155932.tsx
new file mode 100644
index 0000000..a780482
--- /dev/null
+++ b/.history/pages/admin/index_20220522155932.tsx
@@ -0,0 +1,22 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './Login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160138.tsx b/.history/pages/admin/index_20220522160138.tsx
new file mode 100644
index 0000000..cc3fe37
--- /dev/null
+++ b/.history/pages/admin/index_20220522160138.tsx
@@ -0,0 +1,22 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160443.tsx b/.history/pages/admin/index_20220522160443.tsx
new file mode 100644
index 0000000..ffea459
--- /dev/null
+++ b/.history/pages/admin/index_20220522160443.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160449.tsx b/.history/pages/admin/index_20220522160449.tsx
new file mode 100644
index 0000000..93540a5
--- /dev/null
+++ b/.history/pages/admin/index_20220522160449.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter()
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160450.tsx b/.history/pages/admin/index_20220522160450.tsx
new file mode 100644
index 0000000..6edcf4c
--- /dev/null
+++ b/.history/pages/admin/index_20220522160450.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160510.tsx b/.history/pages/admin/index_20220522160510.tsx
new file mode 100644
index 0000000..1a920d3
--- /dev/null
+++ b/.history/pages/admin/index_20220522160510.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/main') : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160522.tsx b/.history/pages/admin/index_20220522160522.tsx
new file mode 100644
index 0000000..d921483
--- /dev/null
+++ b/.history/pages/admin/index_20220522160522.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/main') : router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160633.tsx b/.history/pages/admin/index_20220522160633.tsx
new file mode 100644
index 0000000..7ff6f64
--- /dev/null
+++ b/.history/pages/admin/index_20220522160633.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.prefetch('/main') : router.prefetch('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160713.tsx b/.history/pages/admin/index_20220522160713.tsx
new file mode 100644
index 0000000..444a595
--- /dev/null
+++ b/.history/pages/admin/index_20220522160713.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.prefetch('/main') : router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160722.tsx b/.history/pages/admin/index_20220522160722.tsx
new file mode 100644
index 0000000..7ff6f64
--- /dev/null
+++ b/.history/pages/admin/index_20220522160722.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.prefetch('/main') : router.prefetch('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522160726.tsx b/.history/pages/admin/index_20220522160726.tsx
new file mode 100644
index 0000000..d921483
--- /dev/null
+++ b/.history/pages/admin/index_20220522160726.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/main') : router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161050.tsx b/.history/pages/admin/index_20220522161050.tsx
new file mode 100644
index 0000000..d921483
--- /dev/null
+++ b/.history/pages/admin/index_20220522161050.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/main') : router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161223.tsx b/.history/pages/admin/index_20220522161223.tsx
new file mode 100644
index 0000000..be3fffb
--- /dev/null
+++ b/.history/pages/admin/index_20220522161223.tsx
@@ -0,0 +1,25 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import Router from "next/router";
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/main') : router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161238.tsx b/.history/pages/admin/index_20220522161238.tsx
new file mode 100644
index 0000000..2eea1e4
--- /dev/null
+++ b/.history/pages/admin/index_20220522161238.tsx
@@ -0,0 +1,25 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import Router from "next/router";
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ?  Router.replace('/admin/main'): router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161253.tsx b/.history/pages/admin/index_20220522161253.tsx
new file mode 100644
index 0000000..d8c74d7
--- /dev/null
+++ b/.history/pages/admin/index_20220522161253.tsx
@@ -0,0 +1,25 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import Router from "next/router";
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ?  Router.replace('/admin/main'): Router.replace('/admin/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161312.tsx b/.history/pages/admin/index_20220522161312.tsx
new file mode 100644
index 0000000..4cf4546
--- /dev/null
+++ b/.history/pages/admin/index_20220522161312.tsx
@@ -0,0 +1,25 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+
+import Router from "next/router";
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ?  Router.replace('/admin/main'): Router.replace('/admin/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161326.tsx b/.history/pages/admin/index_20220522161326.tsx
new file mode 100644
index 0000000..d921483
--- /dev/null
+++ b/.history/pages/admin/index_20220522161326.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/main') : router.push('/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522161947.tsx b/.history/pages/admin/index_20220522161947.tsx
new file mode 100644
index 0000000..1a80072
--- /dev/null
+++ b/.history/pages/admin/index_20220522161947.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? router.push('/admin/main') : router.push('/admin/login') }</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522162213.tsx b/.history/pages/admin/index_20220522162213.tsx
new file mode 100644
index 0000000..d6bdd97
--- /dev/null
+++ b/.history/pages/admin/index_20220522162213.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? router.push('/admin/main'): router.push('/admin/login');
+  }, [status_token]);
+
+  return (
+       <>...</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522162649.tsx b/.history/pages/admin/index_20220522162649.tsx
new file mode 100644
index 0000000..b6371bd
--- /dev/null
+++ b/.history/pages/admin/index_20220522162649.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? router.push('/admin/main'): router.push('/admin/login');
+  }, [status_token]);
+
+  return (
+       <>...</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522162659.tsx b/.history/pages/admin/index_20220522162659.tsx
new file mode 100644
index 0000000..995f2fb
--- /dev/null
+++ b/.history/pages/admin/index_20220522162659.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? router.push('/admin/main'): router.push('/admin/login');
+  }, [token]);
+
+  return (
+       <>...</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522230618.tsx b/.history/pages/admin/index_20220522230618.tsx
new file mode 100644
index 0000000..61d5bf9
--- /dev/null
+++ b/.history/pages/admin/index_20220522230618.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? router.push('/admin/main'): router.push('/admin/login');
+  }, [localStorage.getItem("token")]);
+
+  return (
+       <>...</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522230705.tsx b/.history/pages/admin/index_20220522230705.tsx
new file mode 100644
index 0000000..8b71119
--- /dev/null
+++ b/.history/pages/admin/index_20220522230705.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    
+  }, [token]);
+
+  return (
+       <>{localStorage.getItem("token") ? router.push('/admin/main'): router.push('/admin/login')}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220522230732.tsx b/.history/pages/admin/index_20220522230732.tsx
new file mode 100644
index 0000000..53b1b33
--- /dev/null
+++ b/.history/pages/admin/index_20220522230732.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    
+  }, [token]);
+
+  return (
+       <>{token ? router.push('/admin/main'): router.push('/admin/login')}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094100.tsx b/.history/pages/admin/index_20220523094100.tsx
new file mode 100644
index 0000000..36446c7
--- /dev/null
+++ b/.history/pages/admin/index_20220523094100.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+
+  }, [token]);
+
+  return (
+       <>{token ? router.push('/admin/main'): router.push('/admin/login')}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094122.tsx b/.history/pages/admin/index_20220523094122.tsx
new file mode 100644
index 0000000..1909da3
--- /dev/null
+++ b/.history/pages/admin/index_20220523094122.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    token ? router.push('/admin/main'): router.push('/admin/login')
+  }, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094222.tsx b/.history/pages/admin/index_20220523094222.tsx
new file mode 100644
index 0000000..5c75905
--- /dev/null
+++ b/.history/pages/admin/index_20220523094222.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+  console.log(token);
+  useEffect(() => {
+    token ? router.push('/admin/main'): router.push('/admin/login')
+  }, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094247.tsx b/.history/pages/admin/index_20220523094247.tsx
new file mode 100644
index 0000000..7a4638a
--- /dev/null
+++ b/.history/pages/admin/index_20220523094247.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+  console.log(token.length);
+  useEffect(() => {
+    token ? router.push('/admin/main'): router.push('/admin/login')
+  }, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094301.tsx b/.history/pages/admin/index_20220523094301.tsx
new file mode 100644
index 0000000..c290e00
--- /dev/null
+++ b/.history/pages/admin/index_20220523094301.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token } = useSelector(selectTokenData);
+  console.log(token.length);
+  useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094335.tsx b/.history/pages/admin/index_20220523094335.tsx
new file mode 100644
index 0000000..7858acd
--- /dev/null
+++ b/.history/pages/admin/index_20220523094335.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token.length);
+  useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [status_token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094510.tsx b/.history/pages/admin/index_20220523094510.tsx
new file mode 100644
index 0000000..41fe1b7
--- /dev/null
+++ b/.history/pages/admin/index_20220523094510.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token);
+  useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [status_token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523094624.tsx b/.history/pages/admin/index_20220523094624.tsx
new file mode 100644
index 0000000..463af85
--- /dev/null
+++ b/.history/pages/admin/index_20220523094624.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const router = useRouter();
+  //const { token, status_token } = useSelector(selectTokenData);
+  
+  console.log(localStorage.getItem('token'));
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [1]);
+
+  return (
+       <></>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin/index_20220523183554.tsx b/.history/pages/admin/index_20220523183554.tsx
new file mode 100644
index 0000000..9e274f8
--- /dev/null
+++ b/.history/pages/admin/index_20220523183554.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  //const { token, status_token } = useSelector(selectTokenData);
+
+  console.log(localStorage.getItem('token'));
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [1]);
+
+  return (
+       <></>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523183618.tsx b/.history/pages/admin/index_20220523183618.tsx
new file mode 100644
index 0000000..0355e39
--- /dev/null
+++ b/.history/pages/admin/index_20220523183618.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  //const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(localStorage.getItem('token'));
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [1]);
+
+  return (
+       <></>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523183809.tsx b/.history/pages/admin/index_20220523183809.tsx
new file mode 100644
index 0000000..bbc4580
--- /dev/null
+++ b/.history/pages/admin/index_20220523183809.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(localStorage.getItem('token'));
+  useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523183816.tsx b/.history/pages/admin/index_20220523183816.tsx
new file mode 100644
index 0000000..2bf0918
--- /dev/null
+++ b/.history/pages/admin/index_20220523183816.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(token, 'token');
+  useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  }, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523183932.tsx b/.history/pages/admin/index_20220523183932.tsx
new file mode 100644
index 0000000..8cbfafa
--- /dev/null
+++ b/.history/pages/admin/index_20220523183932.tsx
@@ -0,0 +1,24 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(token, 'token');
+ // useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  //}, [token]);
+
+  return (
+       <></>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184047.tsx b/.history/pages/admin/index_20220523184047.tsx
new file mode 100644
index 0000000..8e652ad
--- /dev/null
+++ b/.history/pages/admin/index_20220523184047.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../../components/admin/pages/Root/Main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(token, 'token');
+ // useEffect(() => {
+    token.length ? router.push('/admin/main'): router.push('/admin/login')
+  //}, [token]);
+
+  return (
+       <>
+       {
+         token.length ? router.push('/admin/main'): router.push('/admin/login')
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184134.tsx b/.history/pages/admin/index_20220523184134.tsx
new file mode 100644
index 0000000..49f788d
--- /dev/null
+++ b/.history/pages/admin/index_20220523184134.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(token, 'token');
+ // useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+  //}, [token]);
+
+  return (
+       <>
+       {
+         token.length ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184237.tsx b/.history/pages/admin/index_20220523184237.tsx
new file mode 100644
index 0000000..8fa500c
--- /dev/null
+++ b/.history/pages/admin/index_20220523184237.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+  
+  console.log(token, 'token');
+ // useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+  //}, [token]);
+
+  return (
+       <>
+       {
+         token.length ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184307.tsx b/.history/pages/admin/index_20220523184307.tsx
new file mode 100644
index 0000000..4f2e797
--- /dev/null
+++ b/.history/pages/admin/index_20220523184307.tsx
@@ -0,0 +1,29 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  console.log(token, 'token');
+  
+ // useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+  //}, [token]);
+
+  return (
+       <>
+       {
+         token.length ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184638.tsx b/.history/pages/admin/index_20220523184638.tsx
new file mode 100644
index 0000000..56a4a26
--- /dev/null
+++ b/.history/pages/admin/index_20220523184638.tsx
@@ -0,0 +1,30 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  
+  
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+   console.log(token, 'token');
+  }, [token]);
+
+  return (
+       <>
+       {
+         token.length ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184718.tsx b/.history/pages/admin/index_20220523184718.tsx
new file mode 100644
index 0000000..9eb20bf
--- /dev/null
+++ b/.history/pages/admin/index_20220523184718.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+   console.log(token, 'token');
+  }, [status_token]);
+
+  return (
+       <>
+       {
+         token.length ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184736.tsx b/.history/pages/admin/index_20220523184736.tsx
new file mode 100644
index 0000000..9ed49fe
--- /dev/null
+++ b/.history/pages/admin/index_20220523184736.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData)
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+   console.log(token, 'token');
+  });
+
+  return (
+       <>
+       {
+         token.length ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184855.tsx b/.history/pages/admin/index_20220523184855.tsx
new file mode 100644
index 0000000..2494e79
--- /dev/null
+++ b/.history/pages/admin/index_20220523184855.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+   console.log(token, 'token');
+   setLogin(true);
+
+  });
+
+  return (
+       <>
+       {
+          login ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523184943.tsx b/.history/pages/admin/index_20220523184943.tsx
new file mode 100644
index 0000000..820d20e
--- /dev/null
+++ b/.history/pages/admin/index_20220523184943.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+   console.log(status_token, 'token');
+   setLogin(true);
+
+  });
+
+  return (
+       <>
+       {
+          login ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523185003.tsx b/.history/pages/admin/index_20220523185003.tsx
new file mode 100644
index 0000000..0d0842a
--- /dev/null
+++ b/.history/pages/admin/index_20220523185003.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+   console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+       <>
+       {
+          login ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220523185047.tsx b/.history/pages/admin/index_20220523185047.tsx
new file mode 100644
index 0000000..52ec278
--- /dev/null
+++ b/.history/pages/admin/index_20220523185047.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+       <>
+       {
+          login ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220524144858.tsx b/.history/pages/admin/index_20220524144858.tsx
new file mode 100644
index 0000000..12dfd57
--- /dev/null
+++ b/.history/pages/admin/index_20220524144858.tsx
@@ -0,0 +1,32 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom"
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+       <>
+       {
+          login ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220524144949.tsx b/.history/pages/admin/index_20220524144949.tsx
new file mode 100644
index 0000000..7b6497f
--- /dev/null
+++ b/.history/pages/admin/index_20220524144949.tsx
@@ -0,0 +1,36 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+       <>
+       {
+          login ? <Main/>: <Login/>
+       }
+       </>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220524145015.tsx b/.history/pages/admin/index_20220524145015.tsx
new file mode 100644
index 0000000..18302d2
--- /dev/null
+++ b/.history/pages/admin/index_20220524145015.tsx
@@ -0,0 +1,43 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+    <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<Login />}>
+        <Route index element={<Login />} />
+        <Route path="teams" element={<Login />}>
+          <Route path=":teamId" element={<Login />} />
+          <Route path="new" element={<Login />} />
+          <Route index element={<Login />} />
+        </Route>
+      </Route>
+    </Routes>
+  </BrowserRouter>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220524150421.tsx b/.history/pages/admin/index_20220524150421.tsx
new file mode 100644
index 0000000..e6dd814
--- /dev/null
+++ b/.history/pages/admin/index_20220524150421.tsx
@@ -0,0 +1,32 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525183924.tsx b/.history/pages/admin/index_20220525183924.tsx
new file mode 100644
index 0000000..01e3052
--- /dev/null
+++ b/.history/pages/admin/index_20220525183924.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+export async function getServerSideProps({ token, res }) {
+  // await dbConnect();
+  // const user = await getUser(req, res);
+   if (!token) {
+     return {
+       redirect: {
+         permanent: false,
+         destination: "/signin",
+       },
+       props: {},
+     };
+   }
+   return {
+     props: {
+       user,
+     },
+   };
+ }
+ 
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525184010.tsx b/.history/pages/admin/index_20220525184010.tsx
new file mode 100644
index 0000000..533842f
--- /dev/null
+++ b/.history/pages/admin/index_20220525184010.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+export async function getServerSideProps({ req, res }) {
+  const { token, status_token } = useSelector(selectTokenData);
+  // await dbConnect();
+  // const user = await getUser(req, res);
+   if (!token) {
+     return {
+       redirect: {
+         permanent: false,
+         destination: "/signin",
+       },
+       props: {},
+     };
+   }
+   return {
+     props: {
+       user,
+     },
+   };
+ }
+ 
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525184049.tsx b/.history/pages/admin/index_20220525184049.tsx
new file mode 100644
index 0000000..e046037
--- /dev/null
+++ b/.history/pages/admin/index_20220525184049.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+export async function getServerSideProps({ req, res }) {
+  const { token, status_token } = useSelector(selectTokenData);
+  // await dbConnect();
+  // const user = await getUser(req, res);
+   if (!token) {
+     return {
+       redirect: {
+         permanent: false,
+         destination: "/signin",
+       },
+       props: {},
+     };
+   }
+   return {
+     props: {
+       //user,
+     },
+   };
+ }
+ 
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525184847.tsx b/.history/pages/admin/index_20220525184847.tsx
new file mode 100644
index 0000000..f02117e
--- /dev/null
+++ b/.history/pages/admin/index_20220525184847.tsx
@@ -0,0 +1,49 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525184859.tsx b/.history/pages/admin/index_20220525184859.tsx
new file mode 100644
index 0000000..8b03cb9
--- /dev/null
+++ b/.history/pages/admin/index_20220525184859.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525184912.tsx b/.history/pages/admin/index_20220525184912.tsx
new file mode 100644
index 0000000..4e46e28
--- /dev/null
+++ b/.history/pages/admin/index_20220525184912.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../utils/types";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525185109.tsx b/.history/pages/admin/index_20220525185109.tsx
new file mode 100644
index 0000000..10415ba
--- /dev/null
+++ b/.history/pages/admin/index_20220525185109.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525185148.tsx b/.history/pages/admin/index_20220525185148.tsx
new file mode 100644
index 0000000..76e506c
--- /dev/null
+++ b/.history/pages/admin/index_20220525185148.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+import { parseUser } from "../utils/parse-user";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525185358.tsx b/.history/pages/admin/index_20220525185358.tsx
new file mode 100644
index 0000000..2c0455e
--- /dev/null
+++ b/.history/pages/admin/index_20220525185358.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+import { parseUser } from "../utils/parse-user";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525185401.tsx b/.history/pages/admin/index_20220525185401.tsx
new file mode 100644
index 0000000..047f970
--- /dev/null
+++ b/.history/pages/admin/index_20220525185401.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525190910.tsx b/.history/pages/admin/index_20220525190910.tsx
new file mode 100644
index 0000000..23df899
--- /dev/null
+++ b/.history/pages/admin/index_20220525190910.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = true;//await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/api/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525191205.tsx b/.history/pages/admin/index_20220525191205.tsx
new file mode 100644
index 0000000..abf5d10
--- /dev/null
+++ b/.history/pages/admin/index_20220525191205.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = true;//await parseUser(ctx);
+  const isDashboardPage = ["/guilds", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/admin/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525191419.tsx b/.history/pages/admin/index_20220525191419.tsx
new file mode 100644
index 0000000..faa7335
--- /dev/null
+++ b/.history/pages/admin/index_20220525191419.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = true;//await parseUser(ctx);
+  const isDashboardPage = ["/admin", "/dashboard"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/admin/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525191425.tsx b/.history/pages/admin/index_20220525191425.tsx
new file mode 100644
index 0000000..c43cb63
--- /dev/null
+++ b/.history/pages/admin/index_20220525191425.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (ctx) {
+  const user = true;//await parseUser(ctx);
+  const isDashboardPage = ["/admin"].includes(ctx.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/admin/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525191603.tsx b/.history/pages/admin/index_20220525191603.tsx
new file mode 100644
index 0000000..1169ccd
--- /dev/null
+++ b/.history/pages/admin/index_20220525191603.tsx
@@ -0,0 +1,55 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (context) {
+  const user = true;//await parseUser(ctx);
+  const isDashboardPage = ["/admin"].includes(context.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      redirect: {
+        destination: "/admin/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525192745.tsx b/.history/pages/admin/index_20220525192745.tsx
new file mode 100644
index 0000000..315863e
--- /dev/null
+++ b/.history/pages/admin/index_20220525192745.tsx
@@ -0,0 +1,56 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async function (context) {
+  const user = true;//await parseUser(ctx);
+  const isDashboardPage = ["/admin"].includes(context.resolvedUrl);
+
+  if (!user && isDashboardPage) {
+    return {
+      
+      redirect: {
+        destination: "/admin/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: { user } };
+};
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525194453.tsx b/.history/pages/admin/index_20220525194453.tsx
new file mode 100644
index 0000000..5cc0377
--- /dev/null
+++ b/.history/pages/admin/index_20220525194453.tsx
@@ -0,0 +1,56 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps = withSession(async function ({ req, res }) {
+  const { user } = req.session
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: { user },
+  }
+})
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525194501.tsx b/.history/pages/admin/index_20220525194501.tsx
new file mode 100644
index 0000000..e6a967f
--- /dev/null
+++ b/.history/pages/admin/index_20220525194501.tsx
@@ -0,0 +1,57 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+import withSession from '../lib/session'
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export const getServerSideProps = withSession(async function ({ req, res }) {
+  const { user } = req.session
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: { user },
+  }
+})
+
+
+export default Index;
diff --git a/.history/pages/admin/index_20220525194756.tsx b/.history/pages/admin/index_20220525194756.tsx
new file mode 100644
index 0000000..2a91f8b
--- /dev/null
+++ b/.history/pages/admin/index_20220525194756.tsx
@@ -0,0 +1,39 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export default Index;
\ No newline at end of file
diff --git a/.history/pages/admin_20220518145912.ts b/.history/pages/admin_20220518145912.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/admin_20220518145940.tsx b/.history/pages/admin_20220518145940.tsx
new file mode 100644
index 0000000..6f0c4dd
--- /dev/null
+++ b/.history/pages/admin_20220518145940.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/admin_20220518145941.ts b/.history/pages/admin_20220518145941.ts
new file mode 100644
index 0000000..6f0c4dd
--- /dev/null
+++ b/.history/pages/admin_20220518145941.ts
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/admin_20220518145955.tsx b/.history/pages/admin_20220518145955.tsx
new file mode 100644
index 0000000..7daad44
--- /dev/null
+++ b/.history/pages/admin_20220518145955.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220518150922.tsx b/.history/pages/admin_20220518150922.tsx
new file mode 100644
index 0000000..7daad44
--- /dev/null
+++ b/.history/pages/admin_20220518150922.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220518151024.tsx b/.history/pages/admin_20220518151024.tsx
new file mode 100644
index 0000000..7daad44
--- /dev/null
+++ b/.history/pages/admin_20220518151024.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220518151335.tsx b/.history/pages/admin_20220518151335.tsx
new file mode 100644
index 0000000..046b22f
--- /dev/null
+++ b/.history/pages/admin_20220518151335.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220518163407.tsx b/.history/pages/admin_20220518163407.tsx
new file mode 100644
index 0000000..3d199ff
--- /dev/null
+++ b/.history/pages/admin_20220518163407.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { Index}
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220518163443.tsx b/.history/pages/admin_20220518163443.tsx
new file mode 100644
index 0000000..be4baf5
--- /dev/null
+++ b/.history/pages/admin_20220518163443.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { Entrance } from '../components/admin/pages/login/Index';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220518163603.tsx b/.history/pages/admin_20220518163603.tsx
new file mode 100644
index 0000000..669bd5e
--- /dev/null
+++ b/.history/pages/admin_20220518163603.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { Entrance } from '../components/admin/pages/login/Index';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        <Entrance/>
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220520131253.tsx b/.history/pages/admin_20220520131253.tsx
new file mode 100644
index 0000000..6b73f71
--- /dev/null
+++ b/.history/pages/admin_20220520131253.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        <Entrance/>
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220520131257.tsx b/.history/pages/admin_20220520131257.tsx
new file mode 100644
index 0000000..d0bf44e
--- /dev/null
+++ b/.history/pages/admin_20220520131257.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        <Login/>
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220520132713.tsx b/.history/pages/admin_20220520132713.tsx
new file mode 100644
index 0000000..3b6054c
--- /dev/null
+++ b/.history/pages/admin_20220520132713.tsx
@@ -0,0 +1,30 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522081319.tsx b/.history/pages/admin_20220522081319.tsx
new file mode 100644
index 0000000..9aa34f0
--- /dev/null
+++ b/.history/pages/admin_20220522081319.tsx
@@ -0,0 +1,30 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522081501.tsx b/.history/pages/admin_20220522081501.tsx
new file mode 100644
index 0000000..a104db3
--- /dev/null
+++ b/.history/pages/admin_20220522081501.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522081731.tsx b/.history/pages/admin_20220522081731.tsx
new file mode 100644
index 0000000..a104db3
--- /dev/null
+++ b/.history/pages/admin_20220522081731.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522081819.tsx b/.history/pages/admin_20220522081819.tsx
new file mode 100644
index 0000000..719cf38
--- /dev/null
+++ b/.history/pages/admin_20220522081819.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = u
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'error') {
+        setInformation(value)
+    } else { setInformation('') }
+    return value;
+  }
+
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522081903.tsx b/.history/pages/admin_20220522081903.tsx
new file mode 100644
index 0000000..aa2e63c
--- /dev/null
+++ b/.history/pages/admin_20220522081903.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'error') {
+        setInformation(value)
+    } else { setInformation('') }
+    return value;
+  }
+
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522081957.tsx b/.history/pages/admin_20220522081957.tsx
new file mode 100644
index 0000000..6f8ff4f
--- /dev/null
+++ b/.history/pages/admin_20220522081957.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'error') {
+      setLogin(value)
+    } else { setLogin('') }
+    return value;
+  }
+
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082032.tsx b/.history/pages/admin_20220522082032.tsx
new file mode 100644
index 0000000..3596ca1
--- /dev/null
+++ b/.history/pages/admin_20220522082032.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key !== 'error') {
+      setLogin(true)
+    }
+  }
+
+  const { token, status_token } = useSelector(selectTokenData);
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082119.tsx b/.history/pages/admin_20220522082119.tsx
new file mode 100644
index 0000000..64804ed
--- /dev/null
+++ b/.history/pages/admin_20220522082119.tsx
@@ -0,0 +1,29 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+  const { token, status_token } = useSelector(selectTokenData);
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key !== 'error') {
+      setLogin(true)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(login, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082149.tsx b/.history/pages/admin_20220522082149.tsx
new file mode 100644
index 0000000..c6b60fd
--- /dev/null
+++ b/.history/pages/admin_20220522082149.tsx
@@ -0,0 +1,29 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+  const { token, status_token } = useSelector(selectTokenData);
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(login, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082326.tsx b/.history/pages/admin_20220522082326.tsx
new file mode 100644
index 0000000..6ea37b8
--- /dev/null
+++ b/.history/pages/admin_20220522082326.tsx
@@ -0,0 +1,30 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+  const { token, status_token } = useSelector(selectTokenData);
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(login, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082420.tsx b/.history/pages/admin_20220522082420.tsx
new file mode 100644
index 0000000..f3c5d3c
--- /dev/null
+++ b/.history/pages/admin_20220522082420.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>();
+  const { token, status_token } = useSelector(selectTokenData);
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082445.tsx b/.history/pages/admin_20220522082445.tsx
new file mode 100644
index 0000000..5d0d2eb
--- /dev/null
+++ b/.history/pages/admin_20220522082445.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(login, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082539.tsx b/.history/pages/admin_20220522082539.tsx
new file mode 100644
index 0000000..8323cd6
--- /dev/null
+++ b/.history/pages/admin_20220522082539.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(status_token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082708.tsx b/.history/pages/admin_20220522082708.tsx
new file mode 100644
index 0000000..97536d4
--- /dev/null
+++ b/.history/pages/admin_20220522082708.tsx
@@ -0,0 +1,32 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    }
+  }
+
+  JSON.stringify(token, replacer);
+
+  console.log(status_token, 'admin');
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082824.tsx b/.history/pages/admin_20220522082824.tsx
new file mode 100644
index 0000000..1abd663
--- /dev/null
+++ b/.history/pages/admin_20220522082824.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    }
+  }
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082941.tsx b/.history/pages/admin_20220522082941.tsx
new file mode 100644
index 0000000..ec23d15
--- /dev/null
+++ b/.history/pages/admin_20220522082941.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(value)}
+  }
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522082955.tsx b/.history/pages/admin_20220522082955.tsx
new file mode 100644
index 0000000..7e8f9d4
--- /dev/null
+++ b/.history/pages/admin_20220522082955.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522083102.tsx b/.history/pages/admin_20220522083102.tsx
new file mode 100644
index 0000000..247e0f3
--- /dev/null
+++ b/.history/pages/admin_20220522083102.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+ if (status_token === 'completed_token') {
+  JSON.stringify(status_token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522083116.tsx b/.history/pages/admin_20220522083116.tsx
new file mode 100644
index 0000000..b31a1c6
--- /dev/null
+++ b/.history/pages/admin_20220522083116.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522083123.tsx b/.history/pages/admin_20220522083123.tsx
new file mode 100644
index 0000000..7e8f9d4
--- /dev/null
+++ b/.history/pages/admin_20220522083123.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522083150.tsx b/.history/pages/admin_20220522083150.tsx
new file mode 100644
index 0000000..55620bc
--- /dev/null
+++ b/.history/pages/admin_20220522083150.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+// if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+//}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522083223.tsx b/.history/pages/admin_20220522083223.tsx
new file mode 100644
index 0000000..cbefbde
--- /dev/null
+++ b/.history/pages/admin_20220522083223.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token) {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522083307.tsx b/.history/pages/admin_20220522083307.tsx
new file mode 100644
index 0000000..1e8be15
--- /dev/null
+++ b/.history/pages/admin_20220522083307.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(login, 'login');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522133505.tsx b/.history/pages/admin_20220522133505.tsx
new file mode 100644
index 0000000..2d5d9f2
--- /dev/null
+++ b/.history/pages/admin_20220522133505.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { Login } from '../components/admin/pages/login/Login';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(localStorage.getItem("token"), 'token');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522133918.tsx b/.history/pages/admin_20220522133918.tsx
new file mode 100644
index 0000000..5d8547a
--- /dev/null
+++ b/.history/pages/admin_20220522133918.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Main } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(localStorage.getItem("token"), 'token');
+}
+
+  return (
+        <Login/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522134106.tsx b/.history/pages/admin_20220522134106.tsx
new file mode 100644
index 0000000..70a202d
--- /dev/null
+++ b/.history/pages/admin_20220522134106.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  console.log(localStorage.getItem("token"), 'token');
+}
+
+  return (
+        {localStorage.getItem("token") ? <Login/> : <MainLayoutRoot/>}
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522134214.tsx b/.history/pages/admin_20220522134214.tsx
new file mode 100644
index 0000000..ad93828
--- /dev/null
+++ b/.history/pages/admin_20220522134214.tsx
@@ -0,0 +1,35 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  const Maint 
+  localStorage.getItem("token") ? :;
+}
+
+  return (
+        {localStorage.getItem("token") ? <Login/> : <MainLayoutRoot/>}
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522134415.tsx b/.history/pages/admin_20220522134415.tsx
new file mode 100644
index 0000000..8e5c886
--- /dev/null
+++ b/.history/pages/admin_20220522134415.tsx
@@ -0,0 +1,40 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+  
+  const Mainq = () => {
+    if (localStorage.getItem("token")) {
+      <MainLayoutRoot/>
+    } else {<Login/>} 
+  }
+
+}
+
+  return (
+        <Mainq/>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522134712.tsx b/.history/pages/admin_20220522134712.tsx
new file mode 100644
index 0000000..c182e4d
--- /dev/null
+++ b/.history/pages/admin_20220522134712.tsx
@@ -0,0 +1,39 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+function Mainq() {
+  if (localStorage.getItem("token")) {
+    <MainLayoutRoot/>
+  } else {<Login/>}
+}
+
+  return (
+       <>{Mainq}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522134805.tsx b/.history/pages/admin_20220522134805.tsx
new file mode 100644
index 0000000..4e87503
--- /dev/null
+++ b/.history/pages/admin_20220522134805.tsx
@@ -0,0 +1,39 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+function Mainq() {
+  if (localStorage.getItem("token")) {
+    <MainLayoutRoot/>
+  } else {<Login/>}
+}
+
+  return (
+       <>{Mainq()}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522134815.tsx b/.history/pages/admin_20220522134815.tsx
new file mode 100644
index 0000000..7a11a3e
--- /dev/null
+++ b/.history/pages/admin_20220522134815.tsx
@@ -0,0 +1,39 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+function Mainq() {
+  if (localStorage.getItem("token")) {
+    return <MainLayoutRoot/>
+  } else { return <Login/>}
+}
+
+  return (
+       <>{Mainq()}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522135738.tsx b/.history/pages/admin_20220522135738.tsx
new file mode 100644
index 0000000..7b72c09
--- /dev/null
+++ b/.history/pages/admin_20220522135738.tsx
@@ -0,0 +1,39 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+function Mainq() {
+  if (localStorage.getItem("token") || '') {
+    return <MainLayoutRoot/>
+  } else { return <Login/>}
+}
+
+  return (
+       <>{Mainq()}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522135800.tsx b/.history/pages/admin_20220522135800.tsx
new file mode 100644
index 0000000..8ae4994
--- /dev/null
+++ b/.history/pages/admin_20220522135800.tsx
@@ -0,0 +1,39 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+
+  if (localStorage.getItem("token") || '') {
+    return <MainLayoutRoot/>
+  } else { return <Login/>}
+
+
+  return (
+       <>{Mainq()}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522135942.tsx b/.history/pages/admin_20220522135942.tsx
new file mode 100644
index 0000000..bca0ac4
--- /dev/null
+++ b/.history/pages/admin_20220522135942.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+useEffect(() => {
+  console.log(_data);
+  postData('/api/product_categories', { _data })
+  .then((data) => {
+      setCategories(data);
+  });
+
+}, [_data]);
+  if (localStorage.getItem("token") || '') {
+    return <MainLayoutRoot/>
+  } else { return <Login/>}
+
+
+  return (
+       <>{Mainq()}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522140248.tsx b/.history/pages/admin_20220522140248.tsx
new file mode 100644
index 0000000..9dad0e5
--- /dev/null
+++ b/.history/pages/admin_20220522140248.tsx
@@ -0,0 +1,41 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+useEffect(() => {
+    if (localStorage.getItem("token") || '') {
+      setLogin(true);
+    } else { setLogin(false) }
+}, [1]);
+
+
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522140414.tsx b/.history/pages/admin_20220522140414.tsx
new file mode 100644
index 0000000..2c01842
--- /dev/null
+++ b/.history/pages/admin_20220522140414.tsx
@@ -0,0 +1,41 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { useAppDispatch } from '../redux/store';
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const dispatch = useAppDispatch();
+  const [login, setLogin] = useState<boolean>(false);
+  const { token, status_token } = useSelector(selectTokenData);
+
+
+  function replacer(key:string, value:string) {
+    console.log(typeof value);
+    if (key === 'token') {
+      setLogin(true);
+      console.log(value)
+    } else {console.log(key)}
+  }
+
+ if (status_token === 'completed_token') {
+  JSON.stringify(token, replacer);
+
+}
+useEffect(() => {
+    if (localStorage.getItem("token") || '') {
+      setLogin(true);
+    } else { setLogin(false) }
+}, [status_token]);
+
+
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522140800.tsx b/.history/pages/admin_20220522140800.tsx
new file mode 100644
index 0000000..49e2d83
--- /dev/null
+++ b/.history/pages/admin_20220522140800.tsx
@@ -0,0 +1,22 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <RootPa/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/admin_20220522155756.tsx b/.history/pages/admin_20220522155756.tsx
new file mode 100644
index 0000000..5be7d5d
--- /dev/null
+++ b/.history/pages/admin_20220522155756.tsx
@@ -0,0 +1,22 @@
+import type { NextPage } from 'next';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayoutRoot } from '../components/admin/pages/Root/Main'
+import { Login } from '../components/admin/pages/login/Login';
+
+import { selectTokenData } from '../redux/login/selectors';
+
+const Admin: NextPage = () => {
+  const [login, setLogin] = useState<boolean>(false);
+  const { status_token } = useSelector(selectTokenData);
+
+  useEffect(() => {
+    localStorage.getItem("token") ? setLogin(true) : setLogin(false);
+  }, [status_token]);
+
+  return (
+       <>{login ? <MainLayoutRoot/> : <Login/>}</>
+  )
+}
+
+export default Admin;
diff --git a/.history/pages/api/hello_20220516191522.ts b/.history/pages/api/hello_20220516191522.ts
new file mode 100644
index 0000000..f8bcc7e
--- /dev/null
+++ b/.history/pages/api/hello_20220516191522.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/.history/pages/api/hello_20220517194800.ts b/.history/pages/api/hello_20220517194800.ts
new file mode 100644
index 0000000..5bb4108
--- /dev/null
+++ b/.history/pages/api/hello_20220517194800.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name1: 'John Doe' })
+}
diff --git a/.history/pages/api/hello_20220517194812.ts b/.history/pages/api/hello_20220517194812.ts
new file mode 100644
index 0000000..92625c3
--- /dev/null
+++ b/.history/pages/api/hello_20220517194812.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name1: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name1: 'John Doe' })
+}
diff --git a/.history/pages/api/hello_20220517194851.ts b/.history/pages/api/hello_20220517194851.ts
new file mode 100644
index 0000000..f8bcc7e
--- /dev/null
+++ b/.history/pages/api/hello_20220517194851.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/.history/pages/api/hello_20220520173044.ts b/.history/pages/api/hello_20220520173044.ts
new file mode 100644
index 0000000..4fef7b2
--- /dev/null
+++ b/.history/pages/api/hello_20220520173044.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  error: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({error:'John Doe' })
+}
diff --git a/.history/pages/api/hello_20220520184435.ts b/.history/pages/api/hello_20220520184435.ts
new file mode 100644
index 0000000..2a4dc55
--- /dev/null
+++ b/.history/pages/api/hello_20220520184435.ts
@@ -0,0 +1,14 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  error: string;
+  tokrn: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({error:'John Doe' })
+}
diff --git a/.history/pages/api/hello_20220520184543.ts b/.history/pages/api/hello_20220520184543.ts
new file mode 100644
index 0000000..0ede6b6
--- /dev/null
+++ b/.history/pages/api/hello_20220520184543.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  error: string,
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({error:'John Doe' })
+}
diff --git a/.history/pages/api/loadingCategories_20220528231459.ts b/.history/pages/api/loadingCategories_20220528231459.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/loadingCategories_20220528231642.ts b/.history/pages/api/loadingCategories_20220528231642.ts
new file mode 100644
index 0000000..3bd2654
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220528231642.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220528231644.ts b/.history/pages/api/loadingCategories_20220528231644.ts
new file mode 100644
index 0000000..3bd2654
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220528231644.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170557.ts b/.history/pages/api/loadingCategories_20220530170557.ts
new file mode 100644
index 0000000..03a0a18
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170557.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+            pool.releaseConnection(conn);
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170559.ts b/.history/pages/api/loadingCategories_20220530170559.ts
new file mode 100644
index 0000000..025a132
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170559.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+            pool.releaseConnection(conn)
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170603.ts b/.history/pages/api/loadingCategories_20220530170603.ts
new file mode 100644
index 0000000..03a0a18
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170603.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+            pool.releaseConnection(conn);
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170605.ts b/.history/pages/api/loadingCategories_20220530170605.ts
new file mode 100644
index 0000000..1dc8a5e
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170605.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+            
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170607.ts b/.history/pages/api/loadingCategories_20220530170607.ts
new file mode 100644
index 0000000..30c955b
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170607.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                pool.releaseConnection(conn);
+            }
+            
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170611.ts b/.history/pages/api/loadingCategories_20220530170611.ts
new file mode 100644
index 0000000..2a3f52a
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170611.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                pool.releaseConnection(conn);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170616.ts b/.history/pages/api/loadingCategories_20220530170616.ts
new file mode 100644
index 0000000..8263fbe
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170616.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                pool.releaseConnection(r);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170617.ts b/.history/pages/api/loadingCategories_20220530170617.ts
new file mode 100644
index 0000000..1e9bc86
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170617.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                pool.releaseConnection(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170629.ts b/.history/pages/api/loadingCategories_20220530170629.ts
new file mode 100644
index 0000000..6e96468
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170629.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { releaseConnection, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                pool.releaseConnection(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170631.ts b/.history/pages/api/loadingCategories_20220530170631.ts
new file mode 100644
index 0000000..1e9bc86
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170631.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                pool.releaseConnection(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170654.ts b/.history/pages/api/loadingCategories_20220530170654.ts
new file mode 100644
index 0000000..19a71d9
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170654.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+                
+            }
+        );
+        pool.releaseConnection(rows);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170656.ts b/.history/pages/api/loadingCategories_20220530170656.ts
new file mode 100644
index 0000000..64331a7
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170656.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(rows);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530170702.ts b/.history/pages/api/loadingCategories_20220530170702.ts
new file mode 100644
index 0000000..6093530
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530170702.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171021.ts b/.history/pages/api/loadingCategories_20220530171021.ts
new file mode 100644
index 0000000..a4c8ba1
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171021.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var p"../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171023.ts b/.history/pages/api/loadingCategories_20220530171023.ts
new file mode 100644
index 0000000..b9cc5a8
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171023.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171024.ts b/.history/pages/api/loadingCategories_20220530171024.ts
new file mode 100644
index 0000000..3929372
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171024.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool require"../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171025.ts b/.history/pages/api/loadingCategories_20220530171025.ts
new file mode 100644
index 0000000..f4773c7
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171025.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool require("../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171028.ts b/.history/pages/api/loadingCategories_20220530171028.ts
new file mode 100644
index 0000000..821498d
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171028.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171034.ts b/.history/pages/api/loadingCategories_20220530171034.ts
new file mode 100644
index 0000000..040ffce
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171034.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171036.ts b/.history/pages/api/loadingCategories_20220530171036.ts
new file mode 100644
index 0000000..040ffce
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171036.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171127.ts b/.history/pages/api/loadingCategories_20220530171127.ts
new file mode 100644
index 0000000..bf6b313
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171127.ts
@@ -0,0 +1,39 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err,connection){
+            if (err) {
+              connection.release();
+              throw err;
+            }   
+            connection.query(query,function(err,rows){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }           
+            });
+            connection.on('error', function(err) {      
+                  throw err;
+                  return;     
+            });
+        });
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171128.ts b/.history/pages/api/loadingCategories_20220530171128.ts
new file mode 100644
index 0000000..8889d67
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171128.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err,connection){
+            if (err) {
+              connection.release();
+              throw err;
+            }   
+            connection.query(query,function(err,rows){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }           
+            });
+            connection.on('error', function(err) {      
+                  throw err;
+                  return;     
+            });
+        });
+        
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171142.ts b/.history/pages/api/loadingCategories_20220530171142.ts
new file mode 100644
index 0000000..3b627ba
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171142.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err,connection){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err,rows){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171151.ts b/.history/pages/api/loadingCategories_20220530171151.ts
new file mode 100644
index 0000000..2408d1a
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171151.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err,rows){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171156.ts b/.history/pages/api/loadingCategories_20220530171156.ts
new file mode 100644
index 0000000..3ce5d14
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171156.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171158.ts b/.history/pages/api/loadingCategories_20220530171158.ts
new file mode 100644
index 0000000..6bfa29d
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171158.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                connection.release();
+                if(!err) {
+                    callback(null, {err: QueryError, rows: RowDataPacket[0]});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171201.ts b/.history/pages/api/loadingCategories_20220530171201.ts
new file mode 100644
index 0000000..3ce5d14
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171201.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171206.ts b/.history/pages/api/loadingCategories_20220530171206.ts
new file mode 100644
index 0000000..2408d1a
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171206.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err,rows){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171207.ts b/.history/pages/api/loadingCategories_20220530171207.ts
new file mode 100644
index 0000000..3ce5d14
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171207.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              connection.release();
+              throw err;
+            }
+            connection.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171211.ts b/.history/pages/api/loadingCategories_20220530171211.ts
new file mode 100644
index 0000000..4ad4684
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171211.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            connection.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171213.ts b/.history/pages/api/loadingCategories_20220530171213.ts
new file mode 100644
index 0000000..87caa65
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171213.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                connection.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            connection.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171216.ts b/.history/pages/api/loadingCategories_20220530171216.ts
new file mode 100644
index 0000000..80d2f40
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171216.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            rows.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171228.ts b/.history/pages/api/loadingCategories_20220530171228.ts
new file mode 100644
index 0000000..84c99af
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171228.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    callback(null, {rows: rows});
+                }
+            });
+            rows.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171229.ts b/.history/pages/api/loadingCategories_20220530171229.ts
new file mode 100644
index 0000000..9710a6f
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171229.ts
@@ -0,0 +1,40 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171233.ts b/.history/pages/api/loadingCategories_20220530171233.ts
new file mode 100644
index 0000000..2a9fada
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171233.ts
@@ -0,0 +1,39 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(query,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171241.ts b/.history/pages/api/loadingCategories_20220530171241.ts
new file mode 100644
index 0000000..1e33aa1
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171241.ts
@@ -0,0 +1,39 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(queryString,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171247.ts b/.history/pages/api/loadingCategories_20220530171247.ts
new file mode 100644
index 0000000..78ad4d6
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171247.ts
@@ -0,0 +1,32 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(queryString,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err) {
+                  throw err;
+                  return;
+            });
+        });
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171254.ts b/.history/pages/api/loadingCategories_20220530171254.ts
new file mode 100644
index 0000000..2ee1e28
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171254.ts
@@ -0,0 +1,32 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(queryString,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err: QueryError,) {
+                  throw err;
+                  return;
+            });
+        });
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171256.ts b/.history/pages/api/loadingCategories_20220530171256.ts
new file mode 100644
index 0000000..2ee1e28
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171256.ts
@@ -0,0 +1,32 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(queryString,function(err: QueryError, rows: RowDataPacket[0]){
+                rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err: QueryError,) {
+                  throw err;
+                  return;
+            });
+        });
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171336.ts b/.history/pages/api/loadingCategories_20220530171336.ts
new file mode 100644
index 0000000..5640940
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171336.ts
@@ -0,0 +1,32 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+                rows.release();
+              throw err;
+            }
+            rows.query(queryString,function(err: QueryError, rows: RowDataPacket[0]){
+               // rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err: QueryError,) {
+                  throw err;
+                  return;
+            });
+        });
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171338.ts b/.history/pages/api/loadingCategories_20220530171338.ts
new file mode 100644
index 0000000..3e20d9c
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171338.ts
@@ -0,0 +1,32 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.getConnection(function(err: QueryError, rows: RowDataPacket[0]){
+            if (err) {
+              //  rows.release();
+              throw err;
+            }
+            rows.query(queryString,function(err: QueryError, rows: RowDataPacket[0]){
+               // rows.release();
+                if(!err) {
+                    res.status(200).json(rows);
+                }
+            });
+            rows.on('error', function(err: QueryError,) {
+                  throw err;
+                  return;
+            });
+        });
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171759.ts b/.history/pages/api/loadingCategories_20220530171759.ts
new file mode 100644
index 0000000..6e3dace
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171759.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171803.ts b/.history/pages/api/loadingCategories_20220530171803.ts
new file mode 100644
index 0000000..040ffce
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171803.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171808.ts b/.history/pages/api/loadingCategories_20220530171808.ts
new file mode 100644
index 0000000..48b7c2e
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171808.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(rows);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171809.ts b/.history/pages/api/loadingCategories_20220530171809.ts
new file mode 100644
index 0000000..4e4ab8a
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171809.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171810.ts b/.history/pages/api/loadingCategories_20220530171810.ts
new file mode 100644
index 0000000..4e4ab8a
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171810.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+var pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171826.ts b/.history/pages/api/loadingCategories_20220530171826.ts
new file mode 100644
index 0000000..6093530
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171826.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection(conn);
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530171834.ts b/.history/pages/api/loadingCategories_20220530171834.ts
new file mode 100644
index 0000000..e98a96d
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530171834.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.releaseConnection();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172019.ts b/.history/pages/api/loadingCategories_20220530172019.ts
new file mode 100644
index 0000000..5e0f6bb
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172019.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool. connection.release();();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172022.ts b/.history/pages/api/loadingCategories_20220530172022.ts
new file mode 100644
index 0000000..cdf4d1e
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172022.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool. release();();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172024.ts b/.history/pages/api/loadingCategories_20220530172024.ts
new file mode 100644
index 0000000..8bab8a0
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172024.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool. release();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172027.ts b/.history/pages/api/loadingCategories_20220530172027.ts
new file mode 100644
index 0000000..b4b9615
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172027.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.release();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172037.ts b/.history/pages/api/loadingCategories_20220530172037.ts
new file mode 100644
index 0000000..5dcd857
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172037.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172103.ts b/.history/pages/api/loadingCategories_20220530172103.ts
new file mode 100644
index 0000000..930f0ce
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172103.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172104.ts b/.history/pages/api/loadingCategories_20220530172104.ts
new file mode 100644
index 0000000..930f0ce
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172104.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530172105.ts b/.history/pages/api/loadingCategories_20220530172105.ts
new file mode 100644
index 0000000..930f0ce
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530172105.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530174801.js b/.history/pages/api/loadingCategories_20220530174801.js
new file mode 100644
index 0000000..23399c0
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530174801.js
@@ -0,0 +1,20 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530174802.ts b/.history/pages/api/loadingCategories_20220530174802.ts
new file mode 100644
index 0000000..23399c0
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530174802.ts
@@ -0,0 +1,20 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530174917.js b/.history/pages/api/loadingCategories_20220530174917.js
new file mode 100644
index 0000000..ae3b142
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530174917.js
@@ -0,0 +1,17 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530174920.js b/.history/pages/api/loadingCategories_20220530174920.js
new file mode 100644
index 0000000..7aa9f10
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530174920.js
@@ -0,0 +1,13 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220530174923.js b/.history/pages/api/loadingCategories_20220530174923.js
new file mode 100644
index 0000000..19d325c
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220530174923.js
@@ -0,0 +1,14 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingCategories_20220604161631.js b/.history/pages/api/loadingCategories_20220604161631.js
new file mode 100644
index 0000000..08249a7
--- /dev/null
+++ b/.history/pages/api/loadingCategories_20220604161631.js
@@ -0,0 +1,15 @@
+// Загрузка категорий продукта
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220529141110.ts b/.history/pages/api/loadingPizzaCard_20220529141110.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/loadingPizzaCard_20220529141119.ts b/.history/pages/api/loadingPizzaCard_20220529141119.ts
new file mode 100644
index 0000000..a5f6ca2
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220529141119.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220529141128.ts b/.history/pages/api/loadingPizzaCard_20220529141128.ts
new file mode 100644
index 0000000..7eb11a2
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220529141128.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220529141131.ts b/.history/pages/api/loadingPizzaCard_20220529141131.ts
new file mode 100644
index 0000000..7eb11a2
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220529141131.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220529141301.ts b/.history/pages/api/loadingPizzaCard_20220529141301.ts
new file mode 100644
index 0000000..3986833
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220529141301.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza. FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220529141321.ts b/.history/pages/api/loadingPizzaCard_20220529141321.ts
new file mode 100644
index 0000000..f45c0c1
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220529141321.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.price FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220529141546.ts b/.history/pages/api/loadingPizzaCard_20220529141546.ts
new file mode 100644
index 0000000..8cd295f
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220529141546.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172140.ts b/.history/pages/api/loadingPizzaCard_20220530172140.ts
new file mode 100644
index 0000000..4ab0b39
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172140.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172328.ts b/.history/pages/api/loadingPizzaCard_20220530172328.ts
new file mode 100644
index 0000000..8cd295f
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172328.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172546.ts b/.history/pages/api/loadingPizzaCard_20220530172546.ts
new file mode 100644
index 0000000..7c0a6b2
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172546.ts
@@ -0,0 +1,30 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            const connection = await pool.getConnection();
+            // Use the connection
+            await connection.ping();
+            const rows = await connection.query('SELECT something FROM sometable');
+            // And done with the connection.
+            connection.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172556.ts b/.history/pages/api/loadingPizzaCard_20220530172556.ts
new file mode 100644
index 0000000..13dfc5c
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172556.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await connection.ping();
+            const rows = await connection.query('SELECT something FROM sometable');
+            // And done with the connection.
+            connection.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172600.ts b/.history/pages/api/loadingPizzaCard_20220530172600.ts
new file mode 100644
index 0000000..65e51e2
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172600.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await connection.query('SELECT something FROM sometable');
+            // And done with the connection.
+            connection.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172603.ts b/.history/pages/api/loadingPizzaCard_20220530172603.ts
new file mode 100644
index 0000000..7570081
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172603.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            connection.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172605.ts b/.history/pages/api/loadingPizzaCard_20220530172605.ts
new file mode 100644
index 0000000..f41cc26
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172605.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172712.ts b/.history/pages/api/loadingPizzaCard_20220530172712.ts
new file mode 100644
index 0000000..64161b6
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172712.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172714.ts b/.history/pages/api/loadingPizzaCard_20220530172714.ts
new file mode 100644
index 0000000..259dad0
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172714.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172717.ts b/.history/pages/api/loadingPizzaCard_20220530172717.ts
new file mode 100644
index 0000000..259dad0
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172717.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172801.ts b/.history/pages/api/loadingPizzaCard_20220530172801.ts
new file mode 100644
index 0000000..3945188
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172801.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172810.ts b/.history/pages/api/loadingPizzaCard_20220530172810.ts
new file mode 100644
index 0000000..2ed8b54
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172810.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172811.ts b/.history/pages/api/loadingPizzaCard_20220530172811.ts
new file mode 100644
index 0000000..fa7c4be
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172811.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172816.ts b/.history/pages/api/loadingPizzaCard_20220530172816.ts
new file mode 100644
index 0000000..fd71395
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172816.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172855.ts b/.history/pages/api/loadingPizzaCard_20220530172855.ts
new file mode 100644
index 0000000..cdff5a8
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172855.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import * as mysql from 'mysql2/promise';
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530172856.ts b/.history/pages/api/loadingPizzaCard_20220530172856.ts
new file mode 100644
index 0000000..cdff5a8
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530172856.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import * as mysql from 'mysql2/promise';
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173245.ts b/.history/pages/api/loadingPizzaCard_20220530173245.ts
new file mode 100644
index 0000000..65ad3fd
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173245.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import * as mysql from 'mysql2/promise';
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173304.ts b/.history/pages/api/loadingPizzaCard_20220530173304.ts
new file mode 100644
index 0000000..af4f625
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173304.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import * as mysql from 'mysql2/promise';
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+           // await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173330.ts b/.history/pages/api/loadingPizzaCard_20220530173330.ts
new file mode 100644
index 0000000..fd71395
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173330.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173336.ts b/.history/pages/api/loadingPizzaCard_20220530173336.ts
new file mode 100644
index 0000000..53d463a
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173336.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173345.ts b/.history/pages/api/loadingPizzaCard_20220530173345.ts
new file mode 100644
index 0000000..9b3b505
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173345.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+          //  await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.release();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173448.ts b/.history/pages/api/loadingPizzaCard_20220530173448.ts
new file mode 100644
index 0000000..998ef13
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173448.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+          //  await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.connection.destroy();();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173450.ts b/.history/pages/api/loadingPizzaCard_20220530173450.ts
new file mode 100644
index 0000000..730b68c
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173450.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+          //  await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.destroy();();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173452.ts b/.history/pages/api/loadingPizzaCard_20220530173452.ts
new file mode 100644
index 0000000..21f64f1
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173452.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+          //  await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.destroy();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173455.ts b/.history/pages/api/loadingPizzaCard_20220530173455.ts
new file mode 100644
index 0000000..21f64f1
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173455.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+          //  await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.destroy();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173457.ts b/.history/pages/api/loadingPizzaCard_20220530173457.ts
new file mode 100644
index 0000000..21f64f1
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173457.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+          //  await pool.ping();
+            const rows = await pool.query(queryString);
+            res.status(200).json(rows);
+            pool.destroy();
+        }
+        test();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173509.ts b/.history/pages/api/loadingPizzaCard_20220530173509.ts
new file mode 100644
index 0000000..64161b6
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173509.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173513.ts b/.history/pages/api/loadingPizzaCard_20220530173513.ts
new file mode 100644
index 0000000..259dad0
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173513.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        async function test() {
+            // Use the connection
+            await pool.ping();
+            const rows = await pool.query('SELECT something FROM sometable');
+            // And done with the connection.
+            pool.release();
+        }
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173517.ts b/.history/pages/api/loadingPizzaCard_20220530173517.ts
new file mode 100644
index 0000000..c581b84
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173517.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173525.ts b/.history/pages/api/loadingPizzaCard_20220530173525.ts
new file mode 100644
index 0000000..0b19ec7
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173525.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        connection.destroy();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173527.ts b/.history/pages/api/loadingPizzaCard_20220530173527.ts
new file mode 100644
index 0000000..26a0803
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173527.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.destroy();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173528.ts b/.history/pages/api/loadingPizzaCard_20220530173528.ts
new file mode 100644
index 0000000..26a0803
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173528.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.destroy();
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173736.ts b/.history/pages/api/loadingPizzaCard_20220530173736.ts
new file mode 100644
index 0000000..c581b84
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173736.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173738.ts b/.history/pages/api/loadingPizzaCard_20220530173738.ts
new file mode 100644
index 0000000..7192d33
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173738.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        await pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173750.ts b/.history/pages/api/loadingPizzaCard_20220530173750.ts
new file mode 100644
index 0000000..f066577
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173750.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    await {
+        await pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173752.ts b/.history/pages/api/loadingPizzaCard_20220530173752.ts
new file mode 100644
index 0000000..2da94bd
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173752.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    await {
+        as pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173754.ts b/.history/pages/api/loadingPizzaCard_20220530173754.ts
new file mode 100644
index 0000000..026a688
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173754.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    await {
+        async pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173757.ts b/.history/pages/api/loadingPizzaCard_20220530173757.ts
new file mode 100644
index 0000000..2da94bd
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173757.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    await {
+        as pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173802.ts b/.history/pages/api/loadingPizzaCard_20220530173802.ts
new file mode 100644
index 0000000..ffa3814
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173802.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function  handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        as pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173803.ts b/.history/pages/api/loadingPizzaCard_20220530173803.ts
new file mode 100644
index 0000000..b775115
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173803.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function  handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        as pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173807.ts b/.history/pages/api/loadingPizzaCard_20220530173807.ts
new file mode 100644
index 0000000..cdee906
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173807.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        as pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173809.ts b/.history/pages/api/loadingPizzaCard_20220530173809.ts
new file mode 100644
index 0000000..3cdf285
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173809.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173852.ts b/.history/pages/api/loadingPizzaCard_20220530173852.ts
new file mode 100644
index 0000000..373d36b
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173852.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        await pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173857.ts b/.history/pages/api/loadingPizzaCard_20220530173857.ts
new file mode 100644
index 0000000..56f9c30
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173857.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        awaitpool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173858.ts b/.history/pages/api/loadingPizzaCard_20220530173858.ts
new file mode 100644
index 0000000..373d36b
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173858.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        await pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173900.ts b/.history/pages/api/loadingPizzaCard_20220530173900.ts
new file mode 100644
index 0000000..cdee906
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173900.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        as pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173902.ts b/.history/pages/api/loadingPizzaCard_20220530173902.ts
new file mode 100644
index 0000000..4eb761f
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173902.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default await function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173905.ts b/.history/pages/api/loadingPizzaCard_20220530173905.ts
new file mode 100644
index 0000000..9cdbfdb
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173905.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173907.ts b/.history/pages/api/loadingPizzaCard_20220530173907.ts
new file mode 100644
index 0000000..1cea9c8
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173907.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        a pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173909.ts b/.history/pages/api/loadingPizzaCard_20220530173909.ts
new file mode 100644
index 0000000..16442eb
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173909.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        await pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530173910.ts b/.history/pages/api/loadingPizzaCard_20220530173910.ts
new file mode 100644
index 0000000..16442eb
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530173910.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        await pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174025.ts b/.history/pages/api/loadingPizzaCard_20220530174025.ts
new file mode 100644
index 0000000..148a2bb
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174025.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async function example2 () {
+            const mysql = require('mysql2/promise');
+            const pool = mysql.createPool({database: test});
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query('select sleep(2)'), pool.query('select sleep(3)')]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174036.ts b/.history/pages/api/loadingPizzaCard_20220530174036.ts
new file mode 100644
index 0000000..053ea11
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174036.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async function example2 () {
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query('select sleep(2)'), pool.query('select sleep(3)')]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174042.ts b/.history/pages/api/loadingPizzaCard_20220530174042.ts
new file mode 100644
index 0000000..6697560
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174042.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async function example2 () {
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query('select sleep(2)'), pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174043.ts b/.history/pages/api/loadingPizzaCard_20220530174043.ts
new file mode 100644
index 0000000..6697560
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174043.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async function example2 () {
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query('select sleep(2)'), pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174122.ts b/.history/pages/api/loadingPizzaCard_20220530174122.ts
new file mode 100644
index 0000000..c7229bd
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174122.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async function example2 () {
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString), pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174133.ts b/.history/pages/api/loadingPizzaCard_20220530174133.ts
new file mode 100644
index 0000000..193c8e9
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174133.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+        async function example2 () {
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174156.ts b/.history/pages/api/loadingPizzaCard_20220530174156.ts
new file mode 100644
index 0000000..751e0de
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174156.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+          }
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174158.ts b/.history/pages/api/loadingPizzaCard_20220530174158.ts
new file mode 100644
index 0000000..8d82bea
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174158.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+            const mysql = require('mysql2/promise');
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174201.js b/.history/pages/api/loadingPizzaCard_20220530174201.js
new file mode 100644
index 0000000..57fb073
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174201.js
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174201.ts b/.history/pages/api/loadingPizzaCard_20220530174201.ts
new file mode 100644
index 0000000..57fb073
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174201.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174202.ts b/.history/pages/api/loadingPizzaCard_20220530174202.ts
new file mode 100644
index 0000000..57fb073
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174202.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174257.js b/.history/pages/api/loadingPizzaCard_20220530174257.js
new file mode 100644
index 0000000..d8345e8
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174257.js
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174300.js b/.history/pages/api/loadingPizzaCard_20220530174300.js
new file mode 100644
index 0000000..a03504b
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174300.js
@@ -0,0 +1,20 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+     {
+   
+
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174302.js b/.history/pages/api/loadingPizzaCard_20220530174302.js
new file mode 100644
index 0000000..c4a19c8
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174302.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+
+
+            // execute in parallel, next console.log in 3 seconds
+            await Promise.all([pool.query(queryString)]);
+            console.log('3 seconds after');
+            await pool.end();
+    
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174307.js b/.history/pages/api/loadingPizzaCard_20220530174307.js
new file mode 100644
index 0000000..d55b928
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174307.js
@@ -0,0 +1,12 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+
+
+ 
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174308.js b/.history/pages/api/loadingPizzaCard_20220530174308.js
new file mode 100644
index 0000000..e717727
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174308.js
@@ -0,0 +1,12 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default async function handler(
+
+
+)
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174311.js b/.history/pages/api/loadingPizzaCard_20220530174311.js
new file mode 100644
index 0000000..19db777
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174311.js
@@ -0,0 +1,12 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default asy function handler(
+
+
+)
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174314.js b/.history/pages/api/loadingPizzaCard_20220530174314.js
new file mode 100644
index 0000000..53eaf17
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174314.js
@@ -0,0 +1,12 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+
+
+)
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174336.js b/.history/pages/api/loadingPizzaCard_20220530174336.js
new file mode 100644
index 0000000..fb435fb
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174336.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+)
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174354.js b/.history/pages/api/loadingPizzaCard_20220530174354.js
new file mode 100644
index 0000000..7bac686
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174354.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler{
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+)
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174356.js b/.history/pages/api/loadingPizzaCard_20220530174356.js
new file mode 100644
index 0000000..a4ca8dd
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174356.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler{
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+    }
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174359.js b/.history/pages/api/loadingPizzaCard_20220530174359.js
new file mode 100644
index 0000000..6ec6367
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174359.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler{
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174401.js b/.history/pages/api/loadingPizzaCard_20220530174401.js
new file mode 100644
index 0000000..18ea55e
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174401.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler{
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174408.js b/.history/pages/api/loadingPizzaCard_20220530174408.js
new file mode 100644
index 0000000..4ca60a4
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174408.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler(){
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174411.js b/.history/pages/api/loadingPizzaCard_20220530174411.js
new file mode 100644
index 0000000..e31ac6d
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174411.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(/* ... */);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174416.js b/.history/pages/api/loadingPizzaCard_20220530174416.js
new file mode 100644
index 0000000..1b7cc07
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174416.js
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString);
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174518.js b/.history/pages/api/loadingPizzaCard_20220530174518.js
new file mode 100644
index 0000000..f081521
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174518.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString function(err, rows, fields) {
+            // Connection is automatically released when query resolves
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174522.js b/.history/pages/api/loadingPizzaCard_20220530174522.js
new file mode 100644
index 0000000..97c0355
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174522.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            // Connection is automatically released when query resolves
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174525.js b/.history/pages/api/loadingPizzaCard_20220530174525.js
new file mode 100644
index 0000000..89d9364
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174525.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+          con
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174527.js b/.history/pages/api/loadingPizzaCard_20220530174527.js
new file mode 100644
index 0000000..55bcf4d
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174527.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+          console
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174530.js b/.history/pages/api/loadingPizzaCard_20220530174530.js
new file mode 100644
index 0000000..fe2a779
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174530.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+          console.log();
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174534.js b/.history/pages/api/loadingPizzaCard_20220530174534.js
new file mode 100644
index 0000000..f9da7b9
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174534.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+          console.log(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174559.js b/.history/pages/api/loadingPizzaCard_20220530174559.js
new file mode 100644
index 0000000..752a7fc
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174559.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174603.js b/.history/pages/api/loadingPizzaCard_20220530174603.js
new file mode 100644
index 0000000..752a7fc
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174603.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174615.js b/.history/pages/api/loadingPizzaCard_20220530174615.js
new file mode 100644
index 0000000..752a7fc
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174615.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function Handler() {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174718.js b/.history/pages/api/loadingPizzaCard_20220530174718.js
new file mode 100644
index 0000000..109c675
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174718.js
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174746.js b/.history/pages/api/loadingPizzaCard_20220530174746.js
new file mode 100644
index 0000000..ffb8855
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174746.js
@@ -0,0 +1,18 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174752.js b/.history/pages/api/loadingPizzaCard_20220530174752.js
new file mode 100644
index 0000000..6e4ea14
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174752.js
@@ -0,0 +1,15 @@
+const pool = require("../../server/db/connect");
+
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220530174754.js b/.history/pages/api/loadingPizzaCard_20220530174754.js
new file mode 100644
index 0000000..d9b85b5
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220530174754.js
@@ -0,0 +1,14 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220604161817.js b/.history/pages/api/loadingPizzaCard_20220604161817.js
new file mode 100644
index 0000000..a7c0d29
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220604161817.js
@@ -0,0 +1,15 @@
+// Загрузка списка пиц
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220604161826.js b/.history/pages/api/loadingPizzaCard_20220604161826.js
new file mode 100644
index 0000000..c18794c
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220604161826.js
@@ -0,0 +1,15 @@
+// Загрузка списка пицц
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220604161833.js b/.history/pages/api/loadingPizzaCard_20220604161833.js
new file mode 100644
index 0000000..c18794c
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220604161833.js
@@ -0,0 +1,15 @@
+// Загрузка списка пицц
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220604161837.js b/.history/pages/api/loadingPizzaCard_20220604161837.js
new file mode 100644
index 0000000..a2b2874
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220604161837.js
@@ -0,0 +1,15 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT products.id, products.title, description, type_pizza.img_trad, type_pizza.heft_trad FROM products, type_pizza WHERE products.status=1 and products.type='pizza' and type_pizza.id_products=products.id and type_pizza.size=40";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaCard_20220617160007.js b/.history/pages/api/loadingPizzaCard_20220617160007.js
new file mode 100644
index 0000000..2a90d3b
--- /dev/null
+++ b/.history/pages/api/loadingPizzaCard_20220617160007.js
@@ -0,0 +1,15 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT * FROM products WHERE status=1 and type='pizza'";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220615061112.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220615061112.js
new file mode 100644
index 0000000..31644c3
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220615061112.js
@@ -0,0 +1,17 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const id = 1;
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [id], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220615064228.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064228.js
new file mode 100644
index 0000000..924dcee
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064228.js
@@ -0,0 +1,17 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220615064229.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064229.js
new file mode 100644
index 0000000..924dcee
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064229.js
@@ -0,0 +1,17 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220615064557.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064557.js
new file mode 100644
index 0000000..5047434
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064557.js
@@ -0,0 +1,18 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+            console.log(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220615064558.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064558.js
new file mode 100644
index 0000000..5047434
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220615064558.js
@@ -0,0 +1,18 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+            console.log(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220616103227.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220616103227.js
new file mode 100644
index 0000000..bd1335b
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220616103227.js
@@ -0,0 +1,18 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT * FROM products WHERE status=1 and id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+            console.log(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220616103228.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220616103228.js
new file mode 100644
index 0000000..bd1335b
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220616103228.js
@@ -0,0 +1,18 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT * FROM products WHERE status=1 and id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+            console.log(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation/[pid]_20220617192945.js b/.history/pages/api/loadingPizzaInformation/[pid]_20220617192945.js
new file mode 100644
index 0000000..1d5e5d7
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation/[pid]_20220617192945.js
@@ -0,0 +1,17 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT * FROM products WHERE status=1 and id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation_20220615060838.js b/.history/pages/api/loadingPizzaInformation_20220615060838.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/loadingPizzaInformation_20220615060939.js b/.history/pages/api/loadingPizzaInformation_20220615060939.js
new file mode 100644
index 0000000..3482f15
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation_20220615060939.js
@@ -0,0 +1,16 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    const data = req.body;
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [data.id], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation_20220615061043.js b/.history/pages/api/loadingPizzaInformation_20220615061043.js
new file mode 100644
index 0000000..3482f15
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation_20220615061043.js
@@ -0,0 +1,16 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    const data = req.body;
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [data.id], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizzaInformation_20220615061113.js b/.history/pages/api/loadingPizzaInformation_20220615061113.js
new file mode 100644
index 0000000..31644c3
--- /dev/null
+++ b/.history/pages/api/loadingPizzaInformation_20220615061113.js
@@ -0,0 +1,17 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const id = 1;
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [id], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003410.ts b/.history/pages/api/loadingPizza_20220529003410.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/loadingPizza_20220529003423.ts b/.history/pages/api/loadingPizza_20220529003423.ts
new file mode 100644
index 0000000..6a6c21b
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003423.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003758.ts b/.history/pages/api/loadingPizza_20220529003758.ts
new file mode 100644
index 0000000..afa427f
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003758.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description` FROM `products` WHERE `type`='pizza' and `status`=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003800.ts b/.history/pages/api/loadingPizza_20220529003800.ts
new file mode 100644
index 0000000..b219026
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003800.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description` FROM `products` WHERE `type`='pizza' and `status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003801.ts b/.history/pages/api/loadingPizza_20220529003801.ts
new file mode 100644
index 0000000..6edb032
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003801.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description` FROM `products` WHERE `type`='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003805.ts b/.history/pages/api/loadingPizza_20220529003805.ts
new file mode 100644
index 0000000..c97c520
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003805.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description` FROM `products` WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003807.ts b/.history/pages/api/loadingPizza_20220529003807.ts
new file mode 100644
index 0000000..3d1efa4
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003807.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description` FROM `products WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003808.ts b/.history/pages/api/loadingPizza_20220529003808.ts
new file mode 100644
index 0000000..f732e68
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003808.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description` FROM products WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003810.ts b/.history/pages/api/loadingPizza_20220529003810.ts
new file mode 100644
index 0000000..62c20c3
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003810.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title`,`description FROM products WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003812.ts b/.history/pages/api/loadingPizza_20220529003812.ts
new file mode 100644
index 0000000..ececf86
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003812.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT `id`,`title,description FROM products WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003815.ts b/.history/pages/api/loadingPizza_20220529003815.ts
new file mode 100644
index 0000000..c300045
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003815.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT id,title,description FROM products WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529003816.ts b/.history/pages/api/loadingPizza_20220529003816.ts
new file mode 100644
index 0000000..c300045
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529003816.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT id,title,description FROM products WHERE type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004653.ts b/.history/pages/api/loadingPizza_20220529004653.ts
new file mode 100644
index 0000000..9f35f54
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004653.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.id=?";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004701.ts b/.history/pages/api/loadingPizza_20220529004701.ts
new file mode 100644
index 0000000..5b2dea5
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004701.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004709.ts b/.history/pages/api/loadingPizza_20220529004709.ts
new file mode 100644
index 0000000..0ed48b1
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004709.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and ";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004711.ts b/.history/pages/api/loadingPizza_20220529004711.ts
new file mode 100644
index 0000000..06a8cb8
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004711.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and stat";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004715.ts b/.history/pages/api/loadingPizza_20220529004715.ts
new file mode 100644
index 0000000..0ed48b1
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004715.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and ";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004723.ts b/.history/pages/api/loadingPizza_20220529004723.ts
new file mode 100644
index 0000000..b8e1292
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004723.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and `type`='pizza' and `status`=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004725.ts b/.history/pages/api/loadingPizza_20220529004725.ts
new file mode 100644
index 0000000..93abe66
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004725.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and `type`='pizza' and `status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004726.ts b/.history/pages/api/loadingPizza_20220529004726.ts
new file mode 100644
index 0000000..22954b8
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004726.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and `type`='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004728.ts b/.history/pages/api/loadingPizza_20220529004728.ts
new file mode 100644
index 0000000..d249e6a
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004728.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and type='pizza' and status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220529004817.ts b/.history/pages/api/loadingPizza_20220529004817.ts
new file mode 100644
index 0000000..a5f6ca2
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220529004817.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220530172136.ts b/.history/pages/api/loadingPizza_20220530172136.ts
new file mode 100644
index 0000000..4fd3482
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220530172136.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220530174804.js b/.history/pages/api/loadingPizza_20220530174804.js
new file mode 100644
index 0000000..5bd23d4
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220530174804.js
@@ -0,0 +1,20 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220530174805.ts b/.history/pages/api/loadingPizza_20220530174805.ts
new file mode 100644
index 0000000..5bd23d4
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220530174805.ts
@@ -0,0 +1,20 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220530174901.js b/.history/pages/api/loadingPizza_20220530174901.js
new file mode 100644
index 0000000..7028c96
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220530174901.js
@@ -0,0 +1,18 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingPizza_20220530174904.js b/.history/pages/api/loadingPizza_20220530174904.js
new file mode 100644
index 0000000..85b2cdc
--- /dev/null
+++ b/.history/pages/api/loadingPizza_20220530174904.js
@@ -0,0 +1,14 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220517175059.ts b/.history/pages/api/loadingStock_20220517175059.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/loadingStock_20220517175202.ts b/.history/pages/api/loadingStock_20220517175202.ts
new file mode 100644
index 0000000..f8bcc7e
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517175202.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/.history/pages/api/loadingStock_20220517175237.ts b/.history/pages/api/loadingStock_20220517175237.ts
new file mode 100644
index 0000000..35f677d
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517175237.ts
@@ -0,0 +1,15 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { Pool } from "../../server/db/connect";
+const pool = new Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/.history/pages/api/loadingStock_20220517175417.ts b/.history/pages/api/loadingStock_20220517175417.ts
new file mode 100644
index 0000000..35f677d
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517175417.ts
@@ -0,0 +1,15 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { Pool } from "../../server/db/connect";
+const pool = new Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/.history/pages/api/loadingStock_20220517175432.ts b/.history/pages/api/loadingStock_20220517175432.ts
new file mode 100644
index 0000000..4c8a7b4
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517175432.ts
@@ -0,0 +1,15 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+const pool = new Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/.history/pages/api/loadingStock_20220517184243.ts b/.history/pages/api/loadingStock_20220517184243.ts
new file mode 100644
index 0000000..117dafc
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517184243.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517184406.ts b/.history/pages/api/loadingStock_20220517184406.ts
new file mode 100644
index 0000000..2852265
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517184406.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+const pool = Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517184439.ts b/.history/pages/api/loadingStock_20220517184439.ts
new file mode 100644
index 0000000..50ce254
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517184439.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+const pool = new Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517190418.ts b/.history/pages/api/loadingStock_20220517190418.ts
new file mode 100644
index 0000000..2139d45
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517190418.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Res from "../../server/db/connect";
+const pool = new Res;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517190449.ts b/.history/pages/api/loadingStock_20220517190449.ts
new file mode 100644
index 0000000..2852265
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517190449.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+const pool = Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517190635.ts b/.history/pages/api/loadingStock_20220517190635.ts
new file mode 100644
index 0000000..c71bb2d
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517190635.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+let pool : Pool;
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517191632.ts b/.history/pages/api/loadingStock_20220517191632.ts
new file mode 100644
index 0000000..21e0390
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517191632.ts
@@ -0,0 +1,28 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    const _data = req.body._data;
+    if (req.method === 'POST') {
+        Pool.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.name], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                res.status(200).json({error:'Неверный пароль'});
+                console.log({error:'Неверный пароль'});
+            }
+         })
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517191703.ts b/.history/pages/api/loadingStock_20220517191703.ts
new file mode 100644
index 0000000..f4e289b
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517191703.ts
@@ -0,0 +1,18 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        Pool.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517191825.ts b/.history/pages/api/loadingStock_20220517191825.ts
new file mode 100644
index 0000000..9ef3a1b
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517191825.ts
@@ -0,0 +1,19 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        Pool.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517191855.ts b/.history/pages/api/loadingStock_20220517191855.ts
new file mode 100644
index 0000000..5d2a9c9
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517191855.ts
@@ -0,0 +1,20 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Pool from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        Pool.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517191947.ts b/.history/pages/api/loadingStock_20220517191947.ts
new file mode 100644
index 0000000..8d0b631
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517191947.ts
@@ -0,0 +1,20 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Init from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        Pool.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192004.ts b/.history/pages/api/loadingStock_20220517192004.ts
new file mode 100644
index 0000000..780fb27
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192004.ts
@@ -0,0 +1,20 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import Init from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        Init.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192536.ts b/.history/pages/api/loadingStock_20220517192536.ts
new file mode 100644
index 0000000..bc3510d
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192536.ts
@@ -0,0 +1,20 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import db from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        Init.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192607.ts b/.history/pages/api/loadingStock_20220517192607.ts
new file mode 100644
index 0000000..cb41644
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192607.ts
@@ -0,0 +1,20 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        db.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192807.ts b/.history/pages/api/loadingStock_20220517192807.ts
new file mode 100644
index 0000000..c8ebb37
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192807.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        db.query('SELECT 1 + 1 AS solution', (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192822.ts b/.history/pages/api/loadingStock_20220517192822.ts
new file mode 100644
index 0000000..c685ea7
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192822.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        db.query(queryString, (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192843.ts b/.history/pages/api/loadingStock_20220517192843.ts
new file mode 100644
index 0000000..963cbd3
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192843.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+    if (req.method === 'POST') {
+        db.query(
+            queryString,
+            [order.product.id, order.customer.id, order.productQuantity],
+            (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192903.ts b/.history/pages/api/loadingStock_20220517192903.ts
new file mode 100644
index 0000000..918fb51
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192903.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => { {
+    if (req.method === 'POST') {
+        db.query(
+            queryString,
+            [order.product.id, order.customer.id, order.productQuantity],
+            (err: QueryError, rows: RowDataPacket[]) => {
+            console.log('The solution is: ', rows[0]['solution']);
+        });
+      }
+}
diff --git a/.history/pages/api/loadingStock_20220517192914.ts b/.history/pages/api/loadingStock_20220517192914.ts
new file mode 100644
index 0000000..01aff0e
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517192914.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { QueryError, RowDataPacket } from 'mysql2';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+  
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+  
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517193552.ts b/.history/pages/api/loadingStock_20220517193552.ts
new file mode 100644
index 0000000..c977d28
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517193552.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+  
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+  
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194149.ts b/.history/pages/api/loadingStock_20220517194149.ts
new file mode 100644
index 0000000..15b8b2c
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194149.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+  
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+  
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194156.ts b/.history/pages/api/loadingStock_20220517194156.ts
new file mode 100644
index 0000000..95cfa61
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194156.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194237.ts b/.history/pages/api/loadingStock_20220517194237.ts
new file mode 100644
index 0000000..b64e050
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194237.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "INSERT INTO ProductOrder (product_id, customer_id, product_quantity) VALUES (?, ?, ?)"
+
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+        console.log(result);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194254.ts b/.history/pages/api/loadingStock_20220517194254.ts
new file mode 100644
index 0000000..fc1ac73
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194254.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "SELECT * FROM products"
+
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+        console.log(result);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194458.ts b/.history/pages/api/loadingStock_20220517194458.ts
new file mode 100644
index 0000000..0ffacba
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194458.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (order: BasicOrder, callback: Function) => {
+    const queryString = "SELECT * FROM products";
+
+    db.query(
+      queryString,
+      [order.product.id, order.customer.id, order.productQuantity],
+      (err, result) => {
+        if (err) {callback(err)};
+
+        const insertId = (<OkPacket> result).insertId;
+        callback(null, insertId);
+        console.log(result);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194625.ts b/.history/pages/api/loadingStock_20220517194625.ts
new file mode 100644
index 0000000..a1a2245
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194625.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (
+    req: NextApiRequest,
+    res: NextApiResponse<Data>) => {
+    const queryString = "SELECT * FROM products";
+
+    db.query(
+      queryString,
+      (err, result) => {
+      //  if (err) {callback(err)};
+
+      //  const insertId = (<OkPacket> result).insertId;
+       // callback(null, insertId);
+        console.log(result);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194717.ts b/.history/pages/api/loadingStock_20220517194717.ts
new file mode 100644
index 0000000..cb2047a
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194717.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    QueryError: string,
+    RowDataPacket: string
+}
+
+export const create = (
+    req: NextApiRequest,
+    res: NextApiResponse<Data>) => {
+    const queryString = "SELECT * FROM products";
+
+    db.query(
+      queryString,
+      (err, result) => {
+      //  if (err) {callback(err)};
+
+      //  const insertId = (<OkPacket> result).insertId;
+       // callback(null, insertId);
+        console.log(result);
+      }
+    );
+  };
diff --git a/.history/pages/api/loadingStock_20220517194840.ts b/.history/pages/api/loadingStock_20220517194840.ts
new file mode 100644
index 0000000..b086d9b
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194840.ts
@@ -0,0 +1,15 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    queryString: string,
+}
+
+export const create = (
+    req: NextApiRequest,
+    res: NextApiResponse<Data>) => {
+    const queryString = "SELECT * FROM products";
+  };
diff --git a/.history/pages/api/loadingStock_20220517194905.ts b/.history/pages/api/loadingStock_20220517194905.ts
new file mode 100644
index 0000000..22203ac
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194905.ts
@@ -0,0 +1,16 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    queryString: string,
+}
+
+export const create = (
+    req: NextApiRequest,
+    res: NextApiResponse<Data>) => {
+    const queryString = "SELECT * FROM products";
+    res.status(200).json({ queryString })
+  };
diff --git a/.history/pages/api/loadingStock_20220517194929.ts b/.history/pages/api/loadingStock_20220517194929.ts
new file mode 100644
index 0000000..bb7adf0
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194929.ts
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    queryString: string,
+}
+
+export const create = (
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+    const queryString = "SELECT * FROM products";
+    res.status(200).json({ queryString })
+  };
diff --git a/.history/pages/api/loadingStock_20220517194944.ts b/.history/pages/api/loadingStock_20220517194944.ts
new file mode 100644
index 0000000..09fea23
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517194944.ts
@@ -0,0 +1,17 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    queryString: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        res.status(200).json({ queryString })
+    };
diff --git a/.history/pages/api/loadingStock_20220517195051.ts b/.history/pages/api/loadingStock_20220517195051.ts
new file mode 100644
index 0000000..c4d8753
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195051.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    queryString: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            res.status(200).json({ result })
+            }
+          );
+    };
diff --git a/.history/pages/api/loadingStock_20220517195059.ts b/.history/pages/api/loadingStock_20220517195059.ts
new file mode 100644
index 0000000..fdcdc4d
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195059.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    result: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            res.status(200).json({ result })
+            }
+          );
+    };
diff --git a/.history/pages/api/loadingStock_20220517195129.ts b/.history/pages/api/loadingStock_20220517195129.ts
new file mode 100644
index 0000000..4a16299
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195129.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    result1: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            res.status(200).json({ result1:result })
+            }
+          );
+    };
diff --git a/.history/pages/api/loadingStock_20220517195143.ts b/.history/pages/api/loadingStock_20220517195143.ts
new file mode 100644
index 0000000..a9dbd9a
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195143.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    result: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            res.status(200).json({ result:result })
+            }
+          );
+    };
diff --git a/.history/pages/api/loadingStock_20220517195317.ts b/.history/pages/api/loadingStock_20220517195317.ts
new file mode 100644
index 0000000..5e36c26
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195317.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    res: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            res.status(200).json({ res:result })
+            }
+          );
+    };
diff --git a/.history/pages/api/loadingStock_20220517195455.ts b/.history/pages/api/loadingStock_20220517195455.ts
new file mode 100644
index 0000000..b03df22
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195455.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    out: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            res.status(200).json({ out:result })
+            }
+          );
+    };
diff --git a/.history/pages/api/loadingStock_20220517195542.ts b/.history/pages/api/loadingStock_20220517195542.ts
new file mode 100644
index 0000000..af250c7
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195542.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    out: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            }
+          );
+          res.status(200).json({ out: 'dd' })
+    };
diff --git a/.history/pages/api/loadingStock_20220517195755.ts b/.history/pages/api/loadingStock_20220517195755.ts
new file mode 100644
index 0000000..2082a58
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195755.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    out: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            }
+          );
+          res.status(200).json({ out: 'dd' })
+    };
+
+
+                                  o9999'
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220517195850.ts b/.history/pages/api/loadingStock_20220517195850.ts
new file mode 100644
index 0000000..32b5674
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517195850.ts
@@ -0,0 +1,29 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    out: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            }
+          );
+          res.status(200).json({ out: 'dd' })
+    };
+
+
+,\
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220517200916.ts b/.history/pages/api/loadingStock_20220517200916.ts
new file mode 100644
index 0000000..f46b91e
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517200916.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    out: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            }
+          );
+          res.status(200).json({ out: 'dd' })
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220517200919.ts b/.history/pages/api/loadingStock_20220517200919.ts
new file mode 100644
index 0000000..f46b91e
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220517200919.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    out: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            }
+          );
+          res.status(200).json({ out: 'dd' })
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518100322.ts b/.history/pages/api/loadingStock_20220518100322.ts
new file mode 100644
index 0000000..61f7bfa
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518100322.ts
@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    result: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            }
+          );
+          res.status(200).json(result)
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518101927.ts b/.history/pages/api/loadingStock_20220518101927.ts
new file mode 100644
index 0000000..6dc8a63
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518101927.ts
@@ -0,0 +1,28 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    Data: Array<string>,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        var Data ;
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            Data = result;
+            }
+          );
+          res.status(200).json(Data)
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518102102.ts b/.history/pages/api/loadingStock_20220518102102.ts
new file mode 100644
index 0000000..d29ac6a
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518102102.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    Data: Array<string>,
+}
+var data ;
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            data = result;
+            res.status(200).json(result)
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518102618.ts b/.history/pages/api/loadingStock_20220518102618.ts
new file mode 100644
index 0000000..ae3f033
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518102618.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    Data: Array<string>,
+}
+var data ;
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+             // const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            data = result;
+            res.status(200).json(result);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518102833.ts b/.history/pages/api/loadingStock_20220518102833.ts
new file mode 100644
index 0000000..d53c7eb
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518102833.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    insertId: string[],
+}
+var data ;
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const insertId = (<OkPacket> result);
+            //  callback(null, insertId);
+            console.log(result)
+            data = result;
+            res.status(200).json(insertId);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518102936.ts b/.history/pages/api/loadingStock_20220518102936.ts
new file mode 100644
index 0000000..0b32ebc
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518102936.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    insertId: Array<string>,
+}
+var data ;
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            data = result;
+            res.status(200).json(insertId);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518102952.ts b/.history/pages/api/loadingStock_20220518102952.ts
new file mode 100644
index 0000000..b32c5d9
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518102952.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    insertId: string,
+}
+var data ;
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const insertId = (<OkPacket> result).insertId;
+            //  callback(null, insertId);
+            console.log(result)
+            data = result;
+            res.status(200).json(insertId);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518103001.ts b/.history/pages/api/loadingStock_20220518103001.ts
new file mode 100644
index 0000000..85e68d0
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518103001.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    insertId: string,
+}
+var data ;
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const insertId = (<OkPacket> result);
+            //  callback(null, insertId);
+            console.log(result)
+            data = result;
+            res.status(200).json(insertId);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518104147.ts b/.history/pages/api/loadingStock_20220518104147.ts
new file mode 100644
index 0000000..222b8ae
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518104147.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    insertId: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const insertId = (<OkPacket> result);
+            //  callback(null, insertId);
+            res.status(200).json(insertId);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518104511.ts b/.history/pages/api/loadingStock_20220518104511.ts
new file mode 100644
index 0000000..eb27671
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518104511.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const row = (<RowDataPacket> result);
+            //  callback(null, insertId);
+            res.status(200).json(row);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518104718.ts b/.history/pages/api/loadingStock_20220518104718.ts
new file mode 100644
index 0000000..eb27671
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518104718.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM products";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const row = (<RowDataPacket> result);
+            //  callback(null, insertId);
+            res.status(200).json(row);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518105016.ts b/.history/pages/api/loadingStock_20220518105016.ts
new file mode 100644
index 0000000..ab4b7e0
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518105016.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM stock WHERE status=1";
+        db.query(
+            queryString,
+            (err, result) => {
+             // if (err) {callback(err)};
+                const row = (<RowDataPacket> result);
+            //  callback(null, insertId);
+            res.status(200).json(row);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518105456.ts b/.history/pages/api/loadingStock_20220518105456.ts
new file mode 100644
index 0000000..a6a58da
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518105456.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM stock WHERE status=1";
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[]) => {
+             // if (err) {callback(err)};
+                const row = (<RowDataPacket> result);
+            //  callback(null, insertId);
+            res.status(200).json(row);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518105519.ts b/.history/pages/api/loadingStock_20220518105519.ts
new file mode 100644
index 0000000..842bf45
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518105519.ts
@@ -0,0 +1,25 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM stock WHERE status=1";
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[]) => {
+             // if (err) {callback(err)};
+                const row = <RowDataPacket>;
+            //  callback(null, insertId);
+            res.status(200).json(row);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518105543.ts b/.history/pages/api/loadingStock_20220518105543.ts
new file mode 100644
index 0000000..5e45d37
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518105543.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM stock WHERE status=1";
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[]) => {
+             // if (err) {callback(err)};
+            //  callback(null, insertId);
+            res.status(200).json(rows);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518105947.ts b/.history/pages/api/loadingStock_20220518105947.ts
new file mode 100644
index 0000000..94b4333
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518105947.ts
@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const queryString = "SELECT * FROM stock WHERE status=1";
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[]) => {
+             // if (err) {callback(err)};
+            //  callback(null, insertId);
+            res.status(200).json(rows);
+            }
+          );
+    }; 
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518110120.ts b/.history/pages/api/loadingStock_20220518110120.ts
new file mode 100644
index 0000000..a8727c2
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518110120.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[]) => {
+            res.status(200).json(rows);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518111405.ts b/.history/pages/api/loadingStock_20220518111405.ts
new file mode 100644
index 0000000..1e6fb20
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518111405.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import {BasicOrder, Order, OrderWithDetails} from "../../server/types/order";
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+            res.status(200).json(rows);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518111722.ts b/.history/pages/api/loadingStock_20220518111722.ts
new file mode 100644
index 0000000..6f40ee3
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518111722.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+            res.status(200).json(rows);
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518111744.ts b/.history/pages/api/loadingStock_20220518111744.ts
new file mode 100644
index 0000000..e6a5157
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518111744.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { db } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        db.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220518140322.ts b/.history/pages/api/loadingStock_20220518140322.ts
new file mode 100644
index 0000000..6a6c21b
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220518140322.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220520153426.ts b/.history/pages/api/loadingStock_20220520153426.ts
new file mode 100644
index 0000000..40a03b8
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220520153426.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+    err: string
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(err);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220520153455.ts b/.history/pages/api/loadingStock_20220520153455.ts
new file mode 100644
index 0000000..6a6c21b
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220520153455.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220530172144.ts b/.history/pages/api/loadingStock_20220530172144.ts
new file mode 100644
index 0000000..400f135
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220530172144.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220530174807.js b/.history/pages/api/loadingStock_20220530174807.js
new file mode 100644
index 0000000..54e4437
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220530174807.js
@@ -0,0 +1,20 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220530174808.ts b/.history/pages/api/loadingStock_20220530174808.ts
new file mode 100644
index 0000000..54e4437
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220530174808.ts
@@ -0,0 +1,20 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+        pool.removeAllListeners;
+    };
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220530174908.js b/.history/pages/api/loadingStock_20220530174908.js
new file mode 100644
index 0000000..4467772
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220530174908.js
@@ -0,0 +1,18 @@
+const pool = require("../../server/db/connect");
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220530174911.js b/.history/pages/api/loadingStock_20220530174911.js
new file mode 100644
index 0000000..818fa3c
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220530174911.js
@@ -0,0 +1,14 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220530174912.js b/.history/pages/api/loadingStock_20220530174912.js
new file mode 100644
index 0000000..818fa3c
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220530174912.js
@@ -0,0 +1,14 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/loadingStock_20220604161706.js b/.history/pages/api/loadingStock_20220604161706.js
new file mode 100644
index 0000000..a8281c3
--- /dev/null
+++ b/.history/pages/api/loadingStock_20220604161706.js
@@ -0,0 +1,15 @@
+// Загрузка списка скидок
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520141546.ts b/.history/pages/api/login/index_20220520141546.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/login/index_20220520141604.ts b/.history/pages/api/login/index_20220520141604.ts
new file mode 100644
index 0000000..194ce88
--- /dev/null
+++ b/.history/pages/api/login/index_20220520141604.ts
@@ -0,0 +1,22 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520141728.ts b/.history/pages/api/login/index_20220520141728.ts
new file mode 100644
index 0000000..05872bc
--- /dev/null
+++ b/.history/pages/api/login/index_20220520141728.ts
@@ -0,0 +1,43 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query("SELECT salt FROM user WHERE login=?", [_data.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query("SELECT salt, id FROM user WHERE password_hash=?", [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query("UPDATE user SET token = ? WHERE id = ?", [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                });
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520141931.ts b/.history/pages/api/login/index_20220520141931.ts
new file mode 100644
index 0000000..32a862a
--- /dev/null
+++ b/.history/pages/api/login/index_20220520141931.ts
@@ -0,0 +1,45 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+                    "SELECT salt, id FROM user WHERE password_hash=?",
+                    "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(sql[0], [req.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                });
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520144912.ts b/.history/pages/api/login/index_20220520144912.ts
new file mode 100644
index 0000000..a221396
--- /dev/null
+++ b/.history/pages/api/login/index_20220520144912.ts
@@ -0,0 +1,46 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import hashPa
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+                    "SELECT salt, id FROM user WHERE password_hash=?",
+                    "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+      /*  pool.query(sql[0], [req.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                });
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520144959.ts b/.history/pages/api/login/index_20220520144959.ts
new file mode 100644
index 0000000..3252ff5
--- /dev/null
+++ b/.history/pages/api/login/index_20220520144959.ts
@@ -0,0 +1,46 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import HashPassword from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+                    "SELECT salt, id FROM user WHERE password_hash=?",
+                    "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+      /*  pool.query(sql[0], [req.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                });
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520145118.ts b/.history/pages/api/login/index_20220520145118.ts
new file mode 100644
index 0000000..219d7e6
--- /dev/null
+++ b/.history/pages/api/login/index_20220520145118.ts
@@ -0,0 +1,49 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+                    "SELECT salt, id FROM user WHERE password_hash=?",
+                    "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        { HashPassword('qazw', 'edrf', function(ddata){
+            console.log(ddata);
+        }
+      /*  pool.query(sql[0], [req.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                });
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520145131.ts b/.history/pages/api/login/index_20220520145131.ts
new file mode 100644
index 0000000..56a673e
--- /dev/null
+++ b/.history/pages/api/login/index_20220520145131.ts
@@ -0,0 +1,49 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+                    "SELECT salt, id FROM user WHERE password_hash=?",
+                    "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+         HashPassword('qazw', 'edrf', function(ddata){
+            console.log(ddata);
+        })
+      /*  pool.query(sql[0], [req.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+                hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                });
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520151436.ts b/.history/pages/api/login/index_20220520151436.ts
new file mode 100644
index 0000000..5d5a371
--- /dev/null
+++ b/.history/pages/api/login/index_20220520151436.ts
@@ -0,0 +1,46 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+                    "SELECT salt, id FROM user WHERE password_hash=?",
+                    "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(sql[0], [req.login], function(err, rows) {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); */
+            }
+         })
+        pool.query(
+            queryString,
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520151600.ts b/.history/pages/api/login/index_20220520151600.ts
new file mode 100644
index 0000000..79b7ca4
--- /dev/null
+++ b/.history/pages/api/login/index_20220520151600.ts
@@ -0,0 +1,48 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT * FROM stock WHERE status=1",
+            "SELECT salt, id FROM user WHERE password_hash=?",
+            "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+
+        pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); */
+            }
+         })
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520151641.ts b/.history/pages/api/login/index_20220520151641.ts
new file mode 100644
index 0000000..99ca096
--- /dev/null
+++ b/.history/pages/api/login/index_20220520151641.ts
@@ -0,0 +1,48 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520151726.ts b/.history/pages/api/login/index_20220520151726.ts
new file mode 100644
index 0000000..fb33ef6
--- /dev/null
+++ b/.history/pages/api/login/index_20220520151726.ts
@@ -0,0 +1,49 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520151941.ts b/.history/pages/api/login/index_20220520151941.ts
new file mode 100644
index 0000000..b496fdb
--- /dev/null
+++ b/.history/pages/api/login/index_20220520151941.ts
@@ -0,0 +1,50 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const [rows, fields] = await pool.execute('SELECT * FROM `table` WHERE `name` = ? AND `age` > ?', ['Morty', 14]);
+       /* pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152014.ts b/.history/pages/api/login/index_20220520152014.ts
new file mode 100644
index 0000000..a66c768
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152014.ts
@@ -0,0 +1,50 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const [rows:string, fields] = await pool.execute('SELECT * FROM `table` WHERE `name` = ? AND `age` > ?', ['Morty', 14]);
+       /* pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152230.ts b/.history/pages/api/login/index_20220520152230.ts
new file mode 100644
index 0000000..4b03bd2
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152230.ts
@@ -0,0 +1,58 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['order.product.id'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              const insertId = (<OkPacket> result).insertId;
+              console.log(null, insertId);
+            }
+          );
+       /* pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152319.ts b/.history/pages/api/login/index_20220520152319.ts
new file mode 100644
index 0000000..f70a84c
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152319.ts
@@ -0,0 +1,58 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['order.product.id'],
+            (err, result) => {
+              if (err) {console.log(err)};
+             // const insertId = (<OkPacket> result).insertId;
+              console.log(null, result);
+            }
+          );
+       /* pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152408.ts b/.history/pages/api/login/index_20220520152408.ts
new file mode 100644
index 0000000..b1099c8
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152408.ts
@@ -0,0 +1,58 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result) => {
+              if (err) {console.log(err)};
+             // const insertId = (<OkPacket> result).insertId;
+              console.log(null, result);
+            }
+          );
+       /* pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152421.ts b/.history/pages/api/login/index_20220520152421.ts
new file mode 100644
index 0000000..1b336d9
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152421.ts
@@ -0,0 +1,58 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result) => {
+              if (err) {console.log(err)};
+             // const insertId = (<OkPacket> result).insertId;
+              console.log(result);
+            }
+          );
+       /* pool.query(
+            sql[0],
+            'sss',
+            (err: QueryError, rows: RowDataPacket[0]) => {
+                res.status(200).json(rows);
+            }
+        );*/
+
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152447.ts b/.history/pages/api/login/index_20220520152447.ts
new file mode 100644
index 0000000..041fcd7
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152447.ts
@@ -0,0 +1,49 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152558.ts b/.history/pages/api/login/index_20220520152558.ts
new file mode 100644
index 0000000..30ee8b1
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152558.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152638.ts b/.history/pages/api/login/index_20220520152638.ts
new file mode 100644
index 0000000..b1495db
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152638.ts
@@ -0,0 +1,50 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+            
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152653.ts b/.history/pages/api/login/index_20220520152653.ts
new file mode 100644
index 0000000..878dd29
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152653.ts
@@ -0,0 +1,50 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+            
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152708.ts b/.history/pages/api/login/index_20220520152708.ts
new file mode 100644
index 0000000..f7efc91
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152708.ts
@@ -0,0 +1,49 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152731.ts b/.history/pages/api/login/index_20220520152731.ts
new file mode 100644
index 0000000..30ee8b1
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152731.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152748.ts b/.history/pages/api/login/index_20220520152748.ts
new file mode 100644
index 0000000..a4602aa
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152748.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152807.ts b/.history/pages/api/login/index_20220520152807.ts
new file mode 100644
index 0000000..3eba2ab
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152807.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result.length ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152816.ts b/.history/pages/api/login/index_20220520152816.ts
new file mode 100644
index 0000000..3054a1f
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152816.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result.length ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152908.ts b/.history/pages/api/login/index_20220520152908.ts
new file mode 100644
index 0000000..2845c18
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152908.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152927.ts b/.history/pages/api/login/index_20220520152927.ts
new file mode 100644
index 0000000..20a3aeb
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152927.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result. ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152930.ts b/.history/pages/api/login/index_20220520152930.ts
new file mode 100644
index 0000000..7e4a6eb
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152930.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result.length ?
+              console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520152940.ts b/.history/pages/api/login/index_20220520152940.ts
new file mode 100644
index 0000000..383dd0a
--- /dev/null
+++ b/.history/pages/api/login/index_20220520152940.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              console.log(result);
+              result.length ?
+                console.log('ok')
+              : console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153006.ts b/.history/pages/api/login/index_20220520153006.ts
new file mode 100644
index 0000000..10ae5f8
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153006.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result) :
+                console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153030.ts b/.history/pages/api/login/index_20220520153030.ts
new file mode 100644
index 0000000..45ca98a
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153030.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                console.log('null');
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153107.ts b/.history/pages/api/login/index_20220520153107.ts
new file mode 100644
index 0000000..292d4d5
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153107.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153134.ts b/.history/pages/api/login/index_20220520153134.ts
new file mode 100644
index 0000000..4ebfcf6
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153134.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string,
+    error: string,
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153218.ts b/.history/pages/api/login/index_20220520153218.ts
new file mode 100644
index 0000000..cc31cd0
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153218.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string;
+    error: string;
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153339.ts b/.history/pages/api/login/index_20220520153339.ts
new file mode 100644
index 0000000..6478803
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153339.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string;
+    err: string;
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json(err);
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153511.ts b/.history/pages/api/login/index_20220520153511.ts
new file mode 100644
index 0000000..112d068
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153511.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string;
+    err: string;
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({'error':''});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520153554.ts b/.history/pages/api/login/index_20220520153554.ts
new file mode 100644
index 0000000..cc31cd0
--- /dev/null
+++ b/.history/pages/api/login/index_20220520153554.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    row: string;
+    error: string;
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520154132.ts b/.history/pages/api/login/index_20220520154132.ts
new file mode 100644
index 0000000..739262e
--- /dev/null
+++ b/.history/pages/api/login/index_20220520154132.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string;
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170153.ts b/.history/pages/api/login/index_20220520170153.ts
new file mode 100644
index 0000000..7a6131f
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170153.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: [string, string];
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170251.ts b/.history/pages/api/login/index_20220520170251.ts
new file mode 100644
index 0000000..e332cbd
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170251.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170406.ts b/.history/pages/api/login/index_20220520170406.ts
new file mode 100644
index 0000000..e332cbd
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170406.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170522.ts b/.history/pages/api/login/index_20220520170522.ts
new file mode 100644
index 0000000..50cc3a4
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170522.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error:  [key:string]: string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170551.ts b/.history/pages/api/login/index_20220520170551.ts
new file mode 100644
index 0000000..bda60b2
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170551.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error:  string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170656.ts b/.history/pages/api/login/index_20220520170656.ts
new file mode 100644
index 0000000..7de0261
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170656.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error:  string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json(anObject {error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520170700.ts b/.history/pages/api/login/index_20220520170700.ts
new file mode 100644
index 0000000..f2eb2be
--- /dev/null
+++ b/.history/pages/api/login/index_20220520170700.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error:  string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json(anObject: {error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520171325.ts b/.history/pages/api/login/index_20220520171325.ts
new file mode 100644
index 0000000..0987bcf
--- /dev/null
+++ b/.history/pages/api/login/index_20220520171325.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    anObject:  string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json(anObject: {error:'Неверный логин'});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520171408.ts b/.history/pages/api/login/index_20220520171408.ts
new file mode 100644
index 0000000..7775338
--- /dev/null
+++ b/.history/pages/api/login/index_20220520171408.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    anObject:  string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({anObject: {error:'Неверный логин'}});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520171547.ts b/.history/pages/api/login/index_20220520171547.ts
new file mode 100644
index 0000000..ab906eb
--- /dev/null
+++ b/.history/pages/api/login/index_20220520171547.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    anObject:  string[];
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({anObject: {error:'dsd'}});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520172233.ts b/.history/pages/api/login/index_20220520172233.ts
new file mode 100644
index 0000000..75b1c10
--- /dev/null
+++ b/.history/pages/api/login/index_20220520172233.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    anObject:  string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                res.status(200).json({ {error:'dsd'}});
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520172302.ts b/.history/pages/api/login/index_20220520172302.ts
new file mode 100644
index 0000000..7739bc7
--- /dev/null
+++ b/.history/pages/api/login/index_20220520172302.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error:  string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        res.status(200).json({error:'dsd'});
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                console.log(result[0]) :
+                
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520172314.ts b/.history/pages/api/login/index_20220520172314.ts
new file mode 100644
index 0000000..6f46c0b
--- /dev/null
+++ b/.history/pages/api/login/index_20220520172314.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        res.status(200).json({error:'dsd'});
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+             // result.length ?
+             //   console.log(result[0]) :
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173026.ts b/.history/pages/api/login/index_20220520173026.ts
new file mode 100644
index 0000000..37d8c9e
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173026.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        res.status(200).json({error:"dsd"});
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+             // result.length ?
+             //   console.log(result[0]) :
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173105.ts b/.history/pages/api/login/index_20220520173105.ts
new file mode 100644
index 0000000..094efe9
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173105.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        res.status(200).json({ error:"dsd"});
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+             // result.length ?
+             //   console.log(result[0]) :
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173117.ts b/.history/pages/api/login/index_20220520173117.ts
new file mode 100644
index 0000000..e498a0f
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173117.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    result: string;
+    error: string;
+}
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        res.status(200).json({error:'John Doe' });
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+             // result.length ?
+             //   console.log(result[0]) :
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173332.ts b/.history/pages/api/login/index_20220520173332.ts
new file mode 100644
index 0000000..3bd7098
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173332.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                console.log(result[0])
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173400.ts b/.history/pages/api/login/index_20220520173400.ts
new file mode 100644
index 0000000..0814d37
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173400.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                console.log(result[0])
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173546.ts b/.history/pages/api/login/index_20220520173546.ts
new file mode 100644
index 0000000..0249006
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173546.ts
@@ -0,0 +1,53 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query(
+            sql[0],
+            ['admin1'],
+            (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520173904.ts b/.history/pages/api/login/index_20220520173904.ts
new file mode 100644
index 0000000..78bb6c6
--- /dev/null
+++ b/.history/pages/api/login/index_20220520173904.ts
@@ -0,0 +1,50 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520174503.ts b/.history/pages/api/login/index_20220520174503.ts
new file mode 100644
index 0000000..85e774e
--- /dev/null
+++ b/.history/pages/api/login/index_20220520174503.ts
@@ -0,0 +1,57 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+type ExtendedRequest = NextApiRequest & {
+    body: {
+      number_one: number;
+      number_two: number;
+    };
+  }  
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520174541.ts b/.history/pages/api/login/index_20220520174541.ts
new file mode 100644
index 0000000..eb8a7ae
--- /dev/null
+++ b/.history/pages/api/login/index_20220520174541.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520174814.ts b/.history/pages/api/login/index_20220520174814.ts
new file mode 100644
index 0000000..d266822
--- /dev/null
+++ b/.history/pages/api/login/index_20220520174814.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest & { query: password },
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175041.ts b/.history/pages/api/login/index_20220520175041.ts
new file mode 100644
index 0000000..eb8a7ae
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175041.ts
@@ -0,0 +1,51 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+  }
+
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175104.ts b/.history/pages/api/login/index_20220520175104.ts
new file mode 100644
index 0000000..b8e47f2
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175104.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type NextApiRequestWithFoo = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175212.ts b/.history/pages/api/login/index_20220520175212.ts
new file mode 100644
index 0000000..78f1d95
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175212.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175248.ts b/.history/pages/api/login/index_20220520175248.ts
new file mode 100644
index 0000000..afa7994
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175248.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (password: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175321.ts b/.history/pages/api/login/index_20220520175321.ts
new file mode 100644
index 0000000..c9700e0
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175321.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    input: (password: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175339.ts b/.history/pages/api/login/index_20220520175339.ts
new file mode 100644
index 0000000..70ff4ea
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175339.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175522.ts b/.history/pages/api/login/index_20220520175522.ts
new file mode 100644
index 0000000..4854d16
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175522.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password('arg'), result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175651.ts b/.history/pages/api/login/index_20220520175651.ts
new file mode 100644
index 0000000..ffb9722
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175651.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string);
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.password('arg'), result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175744.ts b/.history/pages/api/login/index_20220520175744.ts
new file mode 100644
index 0000000..515e100
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175744.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string);
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.query.password('arg'), result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175748.ts b/.history/pages/api/login/index_20220520175748.ts
new file mode 100644
index 0000000..2eda5ff
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175748.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string);
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.query = {password('arg'), result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175800.ts b/.history/pages/api/login/index_20220520175800.ts
new file mode 100644
index 0000000..5015eb4
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175800.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string);
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.query = {password('arg')} result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175822.ts b/.history/pages/api/login/index_20220520175822.ts
new file mode 100644
index 0000000..039bbd5
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175822.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string);
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.query = {password: ('arg')} result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520175828.ts b/.history/pages/api/login/index_20220520175828.ts
new file mode 100644
index 0000000..8369b48
--- /dev/null
+++ b/.history/pages/api/login/index_20220520175828.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string);
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.query = {password: 'arg'} result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520180309.ts b/.history/pages/api/login/index_20220520180309.ts
new file mode 100644
index 0000000..b6e7c1f
--- /dev/null
+++ b/.history/pages/api/login/index_20220520180309.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.query = {password: 'arg'} result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520180437.ts b/.history/pages/api/login/index_20220520180437.ts
new file mode 100644
index 0000000..8e9bb47
--- /dev/null
+++ b/.history/pages/api/login/index_20220520180437.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.foo, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520180819.ts b/.history/pages/api/login/index_20220520180819.ts
new file mode 100644
index 0000000..83d03d4
--- /dev/null
+++ b/.history/pages/api/login/index_20220520180819.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.method, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520180840.ts b/.history/pages/api/login/index_20220520180840.ts
new file mode 100644
index 0000000..268a79f
--- /dev/null
+++ b/.history/pages/api/login/index_20220520180840.ts
@@ -0,0 +1,55 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req);
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.method, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520180851.ts b/.history/pages/api/login/index_20220520180851.ts
new file mode 100644
index 0000000..ce5963b
--- /dev/null
+++ b/.history/pages/api/login/index_20220520180851.ts
@@ -0,0 +1,55 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req);
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword('dddd', result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181014.ts b/.history/pages/api/login/index_20220520181014.ts
new file mode 100644
index 0000000..eb2f4ba
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181014.ts
@@ -0,0 +1,55 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.);
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword('dddd', result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181028.ts b/.history/pages/api/login/index_20220520181028.ts
new file mode 100644
index 0000000..f1f0a36
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181028.ts
@@ -0,0 +1,55 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.method);
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword('dddd', result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181123.ts b/.history/pages/api/login/index_20220520181123.ts
new file mode 100644
index 0000000..082865b
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181123.ts
@@ -0,0 +1,55 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body.password);
+        pool.query( sql[0], ['admin1'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181139.ts b/.history/pages/api/login/index_20220520181139.ts
new file mode 100644
index 0000000..b336032
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181139.ts
@@ -0,0 +1,55 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body.password);
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                }); 
+            }
+         })*/
+        
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181250.ts b/.history/pages/api/login/index_20220520181250.ts
new file mode 100644
index 0000000..0ec7d6a
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181250.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    foo: (bar: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body.password);
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181314.ts b/.history/pages/api/login/index_20220520181314.ts
new file mode 100644
index 0000000..7139991
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181314.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body.password);
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520181404.ts b/.history/pages/api/login/index_20220520181404.ts
new file mode 100644
index 0000000..7139991
--- /dev/null
+++ b/.history/pages/api/login/index_20220520181404.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body.password);
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182047.ts b/.history/pages/api/login/index_20220520182047.ts
new file mode 100644
index 0000000..82469ea
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182047.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body._data.password);
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182106.ts b/.history/pages/api/login/index_20220520182106.ts
new file mode 100644
index 0000000..7d62037
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182106.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        console.log(req.body._data.password);
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(req.body._data.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182159.ts b/.history/pages/api/login/index_20220520182159.ts
new file mode 100644
index 0000000..81ea11a
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182159.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], ['admin'], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182233.ts b/.history/pages/api/login/index_20220520182233.ts
new file mode 100644
index 0000000..5332a8e
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182233.ts
@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    console.log(hash);
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182640.ts b/.history/pages/api/login/index_20220520182640.ts
new file mode 100644
index 0000000..3054b85
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182640.ts
@@ -0,0 +1,56 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+                        
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182656.ts b/.history/pages/api/login/index_20220520182656.ts
new file mode 100644
index 0000000..d072624
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182656.ts
@@ -0,0 +1,56 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [data.login], (err, result:RowDataPacket[0]) => {
+
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182714.ts b/.history/pages/api/login/index_20220520182714.ts
new file mode 100644
index 0000000..3adda18
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182714.ts
@@ -0,0 +1,56 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520182737.ts b/.history/pages/api/login/index_20220520182737.ts
new file mode 100644
index 0000000..c2c252d
--- /dev/null
+++ b/.history/pages/api/login/index_20220520182737.ts
@@ -0,0 +1,57 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+}
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин' }) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ? 
+                        
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520183032.ts b/.history/pages/api/login/index_20220520183032.ts
new file mode 100644
index 0000000..c2f15c2
--- /dev/null
+++ b/.history/pages/api/login/index_20220520183032.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = [{
+    error: string,
+    token: string
+}];
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) : 
+                        
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520183150.ts b/.history/pages/api/login/index_20220520183150.ts
new file mode 100644
index 0000000..7d608ca
--- /dev/null
+++ b/.history/pages/api/login/index_20220520183150.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184159.ts b/.history/pages/api/login/index_20220520184159.ts
new file mode 100644
index 0000000..5445287
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184159.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({error:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184321.ts b/.history/pages/api/login/index_20220520184321.ts
new file mode 100644
index 0000000..7d608ca
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184321.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type Data = {
+    error: string
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184333.ts b/.history/pages/api/login/index_20220520184333.ts
new file mode 100644
index 0000000..5466746
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184333.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data = {
+    error: string
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184403.ts b/.history/pages/api/login/index_20220520184403.ts
new file mode 100644
index 0000000..9b99469
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184403.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse<Data>)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184550.ts b/.history/pages/api/login/index_20220520184550.ts
new file mode 100644
index 0000000..1aa2881
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184550.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184805.ts b/.history/pages/api/login/index_20220520184805.ts
new file mode 100644
index 0000000..65b11cb
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184805.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184846.ts b/.history/pages/api/login/index_20220520184846.ts
new file mode 100644
index 0000000..499f4f1
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184846.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        console.log(data.login);
+                        HashPassword(data.login + data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184906.ts b/.history/pages/api/login/index_20220520184906.ts
new file mode 100644
index 0000000..8d54f19
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184906.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        console.log(data.login);
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login + data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520184917.ts b/.history/pages/api/login/index_20220520184917.ts
new file mode 100644
index 0000000..d9bd387
--- /dev/null
+++ b/.history/pages/api/login/index_20220520184917.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        console.log(data.password);
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        HashPassword(data.login + data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185005.ts b/.history/pages/api/login/index_20220520185005.ts
new file mode 100644
index 0000000..7135b39
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185005.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        !result ?
+                        /*HashPassword(data.login + data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ console.log(result) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185023.ts b/.history/pages/api/login/index_20220520185023.ts
new file mode 100644
index 0000000..b31e88d
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185023.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ?
+                        /*HashPassword(data.login + data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ console.log(result) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185046.ts b/.history/pages/api/login/index_20220520185046.ts
new file mode 100644
index 0000000..568d674
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185046.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ?
+                        HashPassword(data.login + data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185114.ts b/.history/pages/api/login/index_20220520185114.ts
new file mode 100644
index 0000000..8429f55
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185114.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ?
+                        HashPassword(data.login+data.password, result[0].salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result[0].id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185234.ts b/.history/pages/api/login/index_20220520185234.ts
new file mode 100644
index 0000000..3564db2
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185234.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ?
+                        HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        }) :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185301.ts b/.history/pages/api/login/index_20220520185301.ts
new file mode 100644
index 0000000..33bc6b9
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185301.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ :
+                        res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185321.ts b/.history/pages/api/login/index_20220520185321.ts
new file mode 100644
index 0000000..76eb46d
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185321.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185425.ts b/.history/pages/api/login/index_20220520185425.ts
new file mode 100644
index 0000000..76eb46d
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185425.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185621.ts b/.history/pages/api/login/index_20220520185621.ts
new file mode 100644
index 0000000..60d2b84
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185621.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        console.log(data);
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                HashPassword(data.password, result[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                        result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185713.ts b/.history/pages/api/login/index_20220520185713.ts
new file mode 100644
index 0000000..36ff7fc
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185713.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(result);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185723.ts b/.history/pages/api/login/index_20220520185723.ts
new file mode 100644
index 0000000..1ac3888
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185723.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(hash);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185821.ts b/.history/pages/api/login/index_20220520185821.ts
new file mode 100644
index 0000000..bf0301d
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185821.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(result[0].salt);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185832.ts b/.history/pages/api/login/index_20220520185832.ts
new file mode 100644
index 0000000..36ff7fc
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185832.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(result);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185845.ts b/.history/pages/api/login/index_20220520185845.ts
new file mode 100644
index 0000000..aa1b764
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185845.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result.salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(result.salt);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520185853.ts b/.history/pages/api/login/index_20220520185853.ts
new file mode 100644
index 0000000..bddc9da
--- /dev/null
+++ b/.history/pages/api/login/index_20220520185853.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result.salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(result);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190015.ts b/.history/pages/api/login/index_20220520190015.ts
new file mode 100644
index 0000000..64b2aa3
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190015.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    console.log(result)
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190025.ts b/.history/pages/api/login/index_20220520190025.ts
new file mode 100644
index 0000000..a117fca
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190025.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    console.log(result.salt)
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190032.ts b/.history/pages/api/login/index_20220520190032.ts
new file mode 100644
index 0000000..ba4c9a0
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190032.ts
@@ -0,0 +1,52 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    console.log(result[0].salt)
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190057.ts b/.history/pages/api/login/index_20220520190057.ts
new file mode 100644
index 0000000..1cae644
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190057.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(result);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190134.ts b/.history/pages/api/login/index_20220520190134.ts
new file mode 100644
index 0000000..a9dbda7
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190134.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            console.log(hash);
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190156.ts b/.history/pages/api/login/index_20220520190156.ts
new file mode 100644
index 0000000..ffe7935
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190156.ts
@@ -0,0 +1,65 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        console.log(hash);
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190236.ts b/.history/pages/api/login/index_20220520190236.ts
new file mode 100644
index 0000000..ffe7935
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190236.ts
@@ -0,0 +1,65 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        console.log(hash);
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190245.ts b/.history/pages/api/login/index_20220520190245.ts
new file mode 100644
index 0000000..6efe4a1
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190245.ts
@@ -0,0 +1,65 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) : 
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        console.log(11);
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190318.ts b/.history/pages/api/login/index_20220520190318.ts
new file mode 100644
index 0000000..a0a2eaf
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190318.ts
@@ -0,0 +1,65 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        console.log(hash);
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190410.ts b/.history/pages/api/login/index_20220520190410.ts
new file mode 100644
index 0000000..cb63316
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190410.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ? console.log(result)
+                       /* HashPassword(data.login+data.password, result.salt , function(token) {
+                            console.log(token);
+                            pool.query(sql[12], [token, result.id], function() {
+                                res.status(200).json({token:token});
+                             })
+                        })*/ : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190550.ts b/.history/pages/api/login/index_20220520190550.ts
new file mode 100644
index 0000000..62851ac
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190550.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    console.log(token);
+                                    pool.query(sql[12], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190611.ts b/.history/pages/api/login/index_20220520190611.ts
new file mode 100644
index 0000000..241736c
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190611.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    console.log(token);
+                                    pool.query(sql[12], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190621.ts b/.history/pages/api/login/index_20220520190621.ts
new file mode 100644
index 0000000..4f166fa
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190621.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    //console.log(token);
+                                    pool.query(sql[12], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190635.ts b/.history/pages/api/login/index_20220520190635.ts
new file mode 100644
index 0000000..3dffdd6
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190635.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    //console.log(token);
+                                    pool.query(sql[12], [token, result[0].id], function() {
+                                        //res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190638.ts b/.history/pages/api/login/index_20220520190638.ts
new file mode 100644
index 0000000..816a2c0
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190638.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    //console.log(token);
+                                    pool.query(sql[1], [token, result[0].id], function() {
+                                        //res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190648.ts b/.history/pages/api/login/index_20220520190648.ts
new file mode 100644
index 0000000..3acfe9a
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190648.ts
@@ -0,0 +1,64 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    //console.log(token);
+                                    pool.query(sql[1], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520190758.ts b/.history/pages/api/login/index_20220520190758.ts
new file mode 100644
index 0000000..66c9060
--- /dev/null
+++ b/.history/pages/api/login/index_20220520190758.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191105.ts b/.history/pages/api/login/index_20220520191105.ts
new file mode 100644
index 0000000..6639ecf
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191105.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password, result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(new Date().toISOString());
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191126.ts b/.history/pages/api/login/index_20220520191126.ts
new file mode 100644
index 0000000..18e70f1
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191126.ts
@@ -0,0 +1,63 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : console.log(result)
+                       // res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191233.ts b/.history/pages/api/login/index_20220520191233.ts
new file mode 100644
index 0000000..b4d5e07
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191233.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191303.ts b/.history/pages/api/login/index_20220520191303.ts
new file mode 100644
index 0000000..da16a71
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191303.ts
@@ -0,0 +1,62 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+interface Data  {
+    error: string,
+};
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: ApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                        console.log(token);
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+        /*pool.query(sql[0], [req.login], (err: QueryError, rows: RowDataPacket[0]) => {
+            if (rows.length<1) {
+                res.status(200).json({error:'Неверный логин'});
+                console.log({error:'Неверный логин'});
+            } else {
+              /*  hashPassword(_data.password, rows[0].salt, function(hash) {
+                    pool.query(sql[1], [hash], function(err, rows2) {
+                        if (rows2.length == 1) {
+                            hashPassword(_data.login+_data.password, rows2[0].salt , function(token) {
+                                pool.query(sql[2] [token, rows2[0].id], function() {
+                                    res.status(200).json({'token':token});
+                                 })
+                            });
+                        } else {
+                            res.status(200).json({error:'Неверный пароль'});
+                            console.log({error:'Неверный пароль'});
+                        }
+                     })
+                })
+            }
+         })*/
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191349.ts b/.history/pages/api/login/index_20220520191349.ts
new file mode 100644
index 0000000..6b08b04
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191349.ts
@@ -0,0 +1,36 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191402.ts b/.history/pages/api/login/index_20220520191402.ts
new file mode 100644
index 0000000..5d3932c
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191402.ts
@@ -0,0 +1,37 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { OkPacket, QueryError, RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+type ApiRequest = NextApiRequest & {
+    password: (arg: string) => void
+}
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220520191424.ts b/.history/pages/api/login/index_20220520191424.ts
new file mode 100644
index 0000000..9364da0
--- /dev/null
+++ b/.history/pages/api/login/index_20220520191424.ts
@@ -0,0 +1,33 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          );
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220521121825.ts b/.history/pages/api/login/index_20220521121825.ts
new file mode 100644
index 0000000..f338420
--- /dev/null
+++ b/.history/pages/api/login/index_20220521121825.ts
@@ -0,0 +1,34 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        req.method === 'POST' ?
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null');
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220521124306.ts b/.history/pages/api/login/index_20220521124306.ts
new file mode 100644
index 0000000..317d5d3
--- /dev/null
+++ b/.history/pages/api/login/index_20220521124306.ts
@@ -0,0 +1,35 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        console.log(req);
+        req.method === 'POST' ?
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null');
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220521124450.ts b/.history/pages/api/login/index_20220521124450.ts
new file mode 100644
index 0000000..a92f62d
--- /dev/null
+++ b/.history/pages/api/login/index_20220521124450.ts
@@ -0,0 +1,35 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body._data;
+        console.log(req.body);
+        req.method === 'POST' ?
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null');
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220521124517.ts b/.history/pages/api/login/index_20220521124517.ts
new file mode 100644
index 0000000..31c6664
--- /dev/null
+++ b/.history/pages/api/login/index_20220521124517.ts
@@ -0,0 +1,35 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body.params;
+        console.log(data);
+        req.method === 'POST' ?
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null');
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220521124551.ts b/.history/pages/api/login/index_20220521124551.ts
new file mode 100644
index 0000000..d8cc83a
--- /dev/null
+++ b/.history/pages/api/login/index_20220521124551.ts
@@ -0,0 +1,34 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body.params;
+        req.method === 'POST' ?
+        pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              !result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null');
+    };
\ No newline at end of file
diff --git a/.history/pages/api/login/index_20220617192141.ts b/.history/pages/api/login/index_20220617192141.ts
new file mode 100644
index 0000000..28d0339
--- /dev/null
+++ b/.history/pages/api/login/index_20220617192141.ts
@@ -0,0 +1,34 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body.params;
+        //req.method === 'POST' ?
+       /* pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null'); */
+    };
\ No newline at end of file
diff --git a/.history/pages/api/sessions_20220525194732.js b/.history/pages/api/sessions_20220525194732.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/api/sessions_20220525194741.js b/.history/pages/api/sessions_20220525194741.js
new file mode 100644
index 0000000..dd7ad8f
--- /dev/null
+++ b/.history/pages/api/sessions_20220525194741.js
@@ -0,0 +1,29 @@
+import { withIronSession } from "next-iron-session";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSession(
+  async (req, res) => {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
diff --git a/.history/pages/api/sessions_20220525195623.js b/.history/pages/api/sessions_20220525195623.js
new file mode 100644
index 0000000..9f9e5f4
--- /dev/null
+++ b/.history/pages/api/sessions_20220525195623.js
@@ -0,0 +1,29 @@
+import { withIronSession } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSession(
+  async (req, res) => {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
diff --git a/.history/pages/api/sessions_20220525195640.js b/.history/pages/api/sessions_20220525195640.js
new file mode 100644
index 0000000..c45872d
--- /dev/null
+++ b/.history/pages/api/sessions_20220525195640.js
@@ -0,0 +1,29 @@
+import { withIronSessionApiRoute } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSessionApiRoute(
+  async (req, res) => {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
diff --git a/.history/pages/api/sessions_20220525200049.js b/.history/pages/api/sessions_20220525200049.js
new file mode 100644
index 0000000..95ee3c0
--- /dev/null
+++ b/.history/pages/api/sessions_20220525200049.js
@@ -0,0 +1,24 @@
+import { withIronSessionApiRoute } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSessionApiRoute(
+    async function loginRoute(req, res) {
+        // get user from database then:
+        req.session.user = {
+          id: 230,
+          admin: true,
+        };
+        await req.session.save();
+        res.send({ ok: true });
+      },
+      {
+        cookieName: "myapp_cookiename",
+        password: "complex_password_at_least_32_characters_long",
+        // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
+        cookieOptions: {
+          secure: process.env.NODE_ENV === "production",
+        },
+      },
+);
diff --git a/.history/pages/api/sessions_20220525200308.js b/.history/pages/api/sessions_20220525200308.js
new file mode 100644
index 0000000..9f8d5a6
--- /dev/null
+++ b/.history/pages/api/sessions_20220525200308.js
@@ -0,0 +1,30 @@
+import { withIronSessionApiRoute } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSessionApiRoute(
+  async (req, res) => {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
+
diff --git a/.history/pages/api/sessions_20220525200402.js b/.history/pages/api/sessions_20220525200402.js
new file mode 100644
index 0000000..02d5866
--- /dev/null
+++ b/.history/pages/api/sessions_20220525200402.js
@@ -0,0 +1,29 @@
+import { withIronSessionApiRoute } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSessionApiRoute(
+    async function loginRoute(req, res) {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
\ No newline at end of file
diff --git a/.history/pages/api/sessions_20220525200632.js b/.history/pages/api/sessions_20220525200632.js
new file mode 100644
index 0000000..6eb09d7
--- /dev/null
+++ b/.history/pages/api/sessions_20220525200632.js
@@ -0,0 +1,30 @@
+import { withIronSessionApiRoute } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSessionApiRoute(
+    async function loginRoute(req, res) {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "myapp_cookiename",
+    password: "complex_password_at_least_32_characters_long",
+    // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production",
+    },
+  },
+);
\ No newline at end of file
diff --git a/.history/pages/cart_20220618071614.tsx b/.history/pages/cart_20220618071614.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/cart_20220618071754.tsx b/.history/pages/cart_20220618071754.tsx
new file mode 100644
index 0000000..9ba82fb
--- /dev/null
+++ b/.history/pages/cart_20220618071754.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                        <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/.history/pages/cart_20220618072413.tsx b/.history/pages/cart_20220618072413.tsx
new file mode 100644
index 0000000..cb08529
--- /dev/null
+++ b/.history/pages/cart_20220618072413.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                        <p>dd{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/.history/pages/cart_20220618073901.tsx b/.history/pages/cart_20220618073901.tsx
new file mode 100644
index 0000000..9ba82fb
--- /dev/null
+++ b/.history/pages/cart_20220618073901.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                        <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/.history/pages/cart_20220618145521.tsx b/.history/pages/cart_20220618145521.tsx
new file mode 100644
index 0000000..325e674
--- /dev/null
+++ b/.history/pages/cart_20220618145521.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import Link from "next/link";
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <a className={classNames('button_close')}>X</a>
+                    </Link>
+                    <div className='modal_body'>
+                        <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/.history/pages/cart_20220618145536.tsx b/.history/pages/cart_20220618145536.tsx
new file mode 100644
index 0000000..c3d117e
--- /dev/null
+++ b/.history/pages/cart_20220618145536.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import Link from "next/link";
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button_close')}>X</button>
+                    </Link>
+                    <div className='modal_body'>
+                        <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/.history/pages/cart_20220618145611.tsx b/.history/pages/cart_20220618145611.tsx
new file mode 100644
index 0000000..1ba0626
--- /dev/null
+++ b/.history/pages/cart_20220618145611.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import Link from "next/link";
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                        <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/.history/pages/index_20220525183526.tsx b/.history/pages/index_20220525183526.tsx
new file mode 100644
index 0000000..7279f71
--- /dev/null
+++ b/.history/pages/index_20220525183526.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export async function getServerSideProps({ req, res }) {
+  await dbConnect();
+  const user = await getUser(req, res);
+  if (!user) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: "/signin",
+      },
+      props: {},
+    };
+  }
+  return {
+    props: {
+      user,
+    },
+  };
+}
+
+export default Home
diff --git a/.history/pages/index_20220525183825.tsx b/.history/pages/index_20220525183825.tsx
new file mode 100644
index 0000000..c35a799
--- /dev/null
+++ b/.history/pages/index_20220525183825.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export async function getServerSideProps({ req, res }) {
+ // await dbConnect();
+ // const user = await getUser(req, res);
+  if (!user) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: "/signin",
+      },
+      props: {},
+    };
+  }
+  return {
+    props: {
+      user,
+    },
+  };
+}
+
+export default Home
diff --git a/.history/pages/index_20220525183852.tsx b/.history/pages/index_20220525183852.tsx
new file mode 100644
index 0000000..5399010
--- /dev/null
+++ b/.history/pages/index_20220525183852.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528173327.tsx b/.history/pages/index_20220528173327.tsx
new file mode 100644
index 0000000..5399010
--- /dev/null
+++ b/.history/pages/index_20220528173327.tsx
@@ -0,0 +1,33 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528174654.tsx b/.history/pages/index_20220528174654.tsx
new file mode 100644
index 0000000..2713855
--- /dev/null
+++ b/.history/pages/index_20220528174654.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528174721.tsx b/.history/pages/index_20220528174721.tsx
new file mode 100644
index 0000000..3d57645
--- /dev/null
+++ b/.history/pages/index_20220528174721.tsx
@@ -0,0 +1,34 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+      <MottoBlock/> 
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528174856.tsx b/.history/pages/index_20220528174856.tsx
new file mode 100644
index 0000000..f7bebc0
--- /dev/null
+++ b/.history/pages/index_20220528174856.tsx
@@ -0,0 +1,35 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletons = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletons : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528224733.tsx b/.history/pages/index_20220528224733.tsx
new file mode 100644
index 0000000..65dde68
--- /dev/null
+++ b/.history/pages/index_20220528224733.tsx
@@ -0,0 +1,37 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528225606.tsx b/.history/pages/index_20220528225606.tsx
new file mode 100644
index 0000000..258f583
--- /dev/null
+++ b/.history/pages/index_20220528225606.tsx
@@ -0,0 +1,38 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { fetchCategories } from '../redux/Categories/stock'
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528225619.tsx b/.history/pages/index_20220528225619.tsx
new file mode 100644
index 0000000..6e6db96
--- /dev/null
+++ b/.history/pages/index_20220528225619.tsx
@@ -0,0 +1,38 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke } from '../redux/stoke/stock';
+import { fetchCategories } from '../redux/categories/stock'
+import { selectStokeData } from '../redux/stoke/selectors';
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(
+      fetchStoke(),
+    );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528231649.tsx b/.history/pages/index_20220528231649.tsx
new file mode 100644
index 0000000..c2a7c8b
--- /dev/null
+++ b/.history/pages/index_20220528231649.tsx
@@ -0,0 +1,42 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528232725.tsx b/.history/pages/index_20220528232725.tsx
new file mode 100644
index 0000000..55d5a6e
--- /dev/null
+++ b/.history/pages/index_20220528232725.tsx
@@ -0,0 +1,42 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+ // const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+ // const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+        
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233321.tsx b/.history/pages/index_20220528233321.tsx
new file mode 100644
index 0000000..d88fa1b
--- /dev/null
+++ b/.history/pages/index_20220528233321.tsx
@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233418.tsx b/.history/pages/index_20220528233418.tsx
new file mode 100644
index 0000000..a8d7c27
--- /dev/null
+++ b/.history/pages/index_20220528233418.tsx
@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+       
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233430.tsx b/.history/pages/index_20220528233430.tsx
new file mode 100644
index 0000000..f016b87
--- /dev/null
+++ b/.history/pages/index_20220528233430.tsx
@@ -0,0 +1,42 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+   
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233439.tsx b/.history/pages/index_20220528233439.tsx
new file mode 100644
index 0000000..ea53041
--- /dev/null
+++ b/.history/pages/index_20220528233439.tsx
@@ -0,0 +1,42 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+    
+   
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233445.tsx b/.history/pages/index_20220528233445.tsx
new file mode 100644
index 0000000..f016b87
--- /dev/null
+++ b/.history/pages/index_20220528233445.tsx
@@ -0,0 +1,42 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+   
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233449.tsx b/.history/pages/index_20220528233449.tsx
new file mode 100644
index 0000000..161ecf9
--- /dev/null
+++ b/.history/pages/index_20220528233449.tsx
@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+    
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528233524.tsx b/.history/pages/index_20220528233524.tsx
new file mode 100644
index 0000000..d88fa1b
--- /dev/null
+++ b/.history/pages/index_20220528233524.tsx
@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234219.tsx b/.history/pages/index_20220528234219.tsx
new file mode 100644
index 0000000..782c7fb
--- /dev/null
+++ b/.history/pages/index_20220528234219.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234223.tsx b/.history/pages/index_20220528234223.tsx
new file mode 100644
index 0000000..f064310
--- /dev/null
+++ b/.history/pages/index_20220528234223.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+
+      </BoxScroll>
+      
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234224.tsx b/.history/pages/index_20220528234224.tsx
new file mode 100644
index 0000000..dd108cf
--- /dev/null
+++ b/.history/pages/index_20220528234224.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+      <MottoBlock/>
+      </BoxScroll>
+      
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234225.tsx b/.history/pages/index_20220528234225.tsx
new file mode 100644
index 0000000..356f319
--- /dev/null
+++ b/.history/pages/index_20220528234225.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234227.tsx b/.history/pages/index_20220528234227.tsx
new file mode 100644
index 0000000..917ed57
--- /dev/null
+++ b/.history/pages/index_20220528234227.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234228.tsx b/.history/pages/index_20220528234228.tsx
new file mode 100644
index 0000000..917ed57
--- /dev/null
+++ b/.history/pages/index_20220528234228.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234229.tsx b/.history/pages/index_20220528234229.tsx
new file mode 100644
index 0000000..917ed57
--- /dev/null
+++ b/.history/pages/index_20220528234229.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234818.tsx b/.history/pages/index_20220528234818.tsx
new file mode 100644
index 0000000..e80db7f
--- /dev/null
+++ b/.history/pages/index_20220528234818.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? skeletonsStoke : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234827.tsx b/.history/pages/index_20220528234827.tsx
new file mode 100644
index 0000000..c518c92
--- /dev/null
+++ b/.history/pages/index_20220528234827.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? CategoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234835.tsx b/.history/pages/index_20220528234835.tsx
new file mode 100644
index 0000000..dc7f5ed
--- /dev/null
+++ b/.history/pages/index_20220528234835.tsx
@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234842.tsx b/.history/pages/index_20220528234842.tsx
new file mode 100644
index 0000000..1901202
--- /dev/null
+++ b/.history/pages/index_20220528234842.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234845.tsx b/.history/pages/index_20220528234845.tsx
new file mode 100644
index 0000000..6990782
--- /dev/null
+++ b/.history/pages/index_20220528234845.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234847.tsx b/.history/pages/index_20220528234847.tsx
new file mode 100644
index 0000000..c17b72d
--- /dev/null
+++ b/.history/pages/index_20220528234847.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(4)].map((_, index) => <categoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234849.tsx b/.history/pages/index_20220528234849.tsx
new file mode 100644
index 0000000..d7a4af3
--- /dev/null
+++ b/.history/pages/index_20220528234849.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(4)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234853.tsx b/.history/pages/index_20220528234853.tsx
new file mode 100644
index 0000000..109d2e0
--- /dev/null
+++ b/.history/pages/index_20220528234853.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528234854.tsx b/.history/pages/index_20220528234854.tsx
new file mode 100644
index 0000000..109d2e0
--- /dev/null
+++ b/.history/pages/index_20220528234854.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528235220.tsx b/.history/pages/index_20220528235220.tsx
new file mode 100644
index 0000000..052f6a6
--- /dev/null
+++ b/.history/pages/index_20220528235220.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading1' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528235228.tsx b/.history/pages/index_20220528235228.tsx
new file mode 100644
index 0000000..109d2e0
--- /dev/null
+++ b/.history/pages/index_20220528235228.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528235239.tsx b/.history/pages/index_20220528235239.tsx
new file mode 100644
index 0000000..e97df65
--- /dev/null
+++ b/.history/pages/index_20220528235239.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status == 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528235245.tsx b/.history/pages/index_20220528235245.tsx
new file mode 100644
index 0000000..9cccb83
--- /dev/null
+++ b/.history/pages/index_20220528235245.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status != 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220528235344.tsx b/.history/pages/index_20220528235344.tsx
new file mode 100644
index 0000000..109d2e0
--- /dev/null
+++ b/.history/pages/index_20220528235344.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002504.tsx b/.history/pages/index_20220529002504.tsx
new file mode 100644
index 0000000..8b526e5
--- /dev/null
+++ b/.history/pages/index_20220529002504.tsx
@@ -0,0 +1,47 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002512.tsx b/.history/pages/index_20220529002512.tsx
new file mode 100644
index 0000000..de715f2
--- /dev/null
+++ b/.history/pages/index_20220529002512.tsx
@@ -0,0 +1,50 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002515.tsx b/.history/pages/index_20220529002515.tsx
new file mode 100644
index 0000000..377083b
--- /dev/null
+++ b/.history/pages/index_20220529002515.tsx
@@ -0,0 +1,50 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002534.tsx b/.history/pages/index_20220529002534.tsx
new file mode 100644
index 0000000..fe278c3
--- /dev/null
+++ b/.history/pages/index_20220529002534.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002538.tsx b/.history/pages/index_20220529002538.tsx
new file mode 100644
index 0000000..aab77e1
--- /dev/null
+++ b/.history/pages/index_20220529002538.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/stock';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002703.tsx b/.history/pages/index_20220529002703.tsx
new file mode 100644
index 0000000..60179ff
--- /dev/null
+++ b/.history/pages/index_20220529002703.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/';
+import { selectStokeData } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002706.tsx b/.history/pages/index_20220529002706.tsx
new file mode 100644
index 0000000..13faf6c
--- /dev/null
+++ b/.history/pages/index_20220529002706.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke } from '../redux/stoke/';
+import {  } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002710.tsx b/.history/pages/index_20220529002710.tsx
new file mode 100644
index 0000000..543f10e
--- /dev/null
+++ b/.history/pages/index_20220529002710.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import {  } from '../redux/stoke/selectors';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002713.tsx b/.history/pages/index_20220529002713.tsx
new file mode 100644
index 0000000..d50aacf
--- /dev/null
+++ b/.history/pages/index_20220529002713.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+
+import { fetchCategories } from '../redux/categories/stock';
+import { selectCategoriesData } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002715.tsx b/.history/pages/index_20220529002715.tsx
new file mode 100644
index 0000000..9ccc8d8
--- /dev/null
+++ b/.history/pages/index_20220529002715.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+
+import { fetchCategories } from '../redux/categories/stock';
+import {  } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002718.tsx b/.history/pages/index_20220529002718.tsx
new file mode 100644
index 0000000..e43ad8b
--- /dev/null
+++ b/.history/pages/index_20220529002718.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+
+import { fetchCategories, selectCategoriesData } from '../redux/categories/stock';
+import {  } from '../redux/categories/selectors';
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002720.tsx b/.history/pages/index_20220529002720.tsx
new file mode 100644
index 0000000..f6768c7
--- /dev/null
+++ b/.history/pages/index_20220529002720.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+
+import { fetchCategories, selectCategoriesData } from '../redux/categories/stock';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002724.tsx b/.history/pages/index_20220529002724.tsx
new file mode 100644
index 0000000..f6768c7
--- /dev/null
+++ b/.history/pages/index_20220529002724.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+
+import { fetchCategories, selectCategoriesData } from '../redux/categories/stock';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002758.tsx b/.history/pages/index_20220529002758.tsx
new file mode 100644
index 0000000..dcb30df
--- /dev/null
+++ b/.history/pages/index_20220529002758.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002801.tsx b/.history/pages/index_20220529002801.tsx
new file mode 100644
index 0000000..2d2b6c2
--- /dev/null
+++ b/.history/pages/index_20220529002801.tsx
@@ -0,0 +1,51 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002803.tsx b/.history/pages/index_20220529002803.tsx
new file mode 100644
index 0000000..2d2b6c2
--- /dev/null
+++ b/.history/pages/index_20220529002803.tsx
@@ -0,0 +1,51 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002815.tsx b/.history/pages/index_20220529002815.tsx
new file mode 100644
index 0000000..ac292b3
--- /dev/null
+++ b/.history/pages/index_20220529002815.tsx
@@ -0,0 +1,51 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002819.tsx b/.history/pages/index_20220529002819.tsx
new file mode 100644
index 0000000..69fa8a7
--- /dev/null
+++ b/.history/pages/index_20220529002819.tsx
@@ -0,0 +1,51 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002910.tsx b/.history/pages/index_20220529002910.tsx
new file mode 100644
index 0000000..052f845
--- /dev/null
+++ b/.history/pages/index_20220529002910.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002912.tsx b/.history/pages/index_20220529002912.tsx
new file mode 100644
index 0000000..76f30e6
--- /dev/null
+++ b/.history/pages/index_20220529002912.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchCategories, selectCategoriesData } from '../redux/';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002914.tsx b/.history/pages/index_20220529002914.tsx
new file mode 100644
index 0000000..254663f
--- /dev/null
+++ b/.history/pages/index_20220529002914.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchCategories, selectCategoriesData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002919.tsx b/.history/pages/index_20220529002919.tsx
new file mode 100644
index 0000000..6fdd4d4
--- /dev/null
+++ b/.history/pages/index_20220529002919.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchCategories, selectData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002922.tsx b/.history/pages/index_20220529002922.tsx
new file mode 100644
index 0000000..bbc58d2
--- /dev/null
+++ b/.history/pages/index_20220529002922.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchCategories, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002928.tsx b/.history/pages/index_20220529002928.tsx
new file mode 100644
index 0000000..0fe3ee0
--- /dev/null
+++ b/.history/pages/index_20220529002928.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529002935.tsx b/.history/pages/index_20220529002935.tsx
new file mode 100644
index 0000000..0fe3ee0
--- /dev/null
+++ b/.history/pages/index_20220529002935.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  //const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003858.tsx b/.history/pages/index_20220529003858.tsx
new file mode 100644
index 0000000..3a9a5a1
--- /dev/null
+++ b/.history/pages/index_20220529003858.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003859.tsx b/.history/pages/index_20220529003859.tsx
new file mode 100644
index 0000000..cf6cd66
--- /dev/null
+++ b/.history/pages/index_20220529003859.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003905.tsx b/.history/pages/index_20220529003905.tsx
new file mode 100644
index 0000000..5b2e100
--- /dev/null
+++ b/.history/pages/index_20220529003905.tsx
@@ -0,0 +1,52 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003913.tsx b/.history/pages/index_20220529003913.tsx
new file mode 100644
index 0000000..10001b5
--- /dev/null
+++ b/.history/pages/index_20220529003913.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchCategories() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003919.tsx b/.history/pages/index_20220529003919.tsx
new file mode 100644
index 0000000..ede9fcd
--- /dev/null
+++ b/.history/pages/index_20220529003919.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003925.tsx b/.history/pages/index_20220529003925.tsx
new file mode 100644
index 0000000..d5b8a06
--- /dev/null
+++ b/.history/pages/index_20220529003925.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003933.tsx b/.history/pages/index_20220529003933.tsx
new file mode 100644
index 0000000..c119aa7
--- /dev/null
+++ b/.history/pages/index_20220529003933.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, categories_status } = useSelector(selectCategoriesData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003939.tsx b/.history/pages/index_20220529003939.tsx
new file mode 100644
index 0000000..076fbec
--- /dev/null
+++ b/.history/pages/index_20220529003939.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, categories_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003946.tsx b/.history/pages/index_20220529003946.tsx
new file mode 100644
index 0000000..b1b7270
--- /dev/null
+++ b/.history/pages/index_20220529003946.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529003951.tsx b/.history/pages/index_20220529003951.tsx
new file mode 100644
index 0000000..4960036
--- /dev/null
+++ b/.history/pages/index_20220529003951.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004022.tsx b/.history/pages/index_20220529004022.tsx
new file mode 100644
index 0000000..4f62f45
--- /dev/null
+++ b/.history/pages/index_20220529004022.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, 
+        CategoriesButton, CategoriesSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004026.tsx b/.history/pages/index_20220529004026.tsx
new file mode 100644
index 0000000..3458ce2
--- /dev/null
+++ b/.history/pages/index_20220529004026.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock, 
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004028.tsx b/.history/pages/index_20220529004028.tsx
new file mode 100644
index 0000000..c4aee0e
--- /dev/null
+++ b/.history/pages/index_20220529004028.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004119.tsx b/.history/pages/index_20220529004119.tsx
new file mode 100644
index 0000000..ad92acf
--- /dev/null
+++ b/.history/pages/index_20220529004119.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004422.tsx b/.history/pages/index_20220529004422.tsx
new file mode 100644
index 0000000..84f57fb
--- /dev/null
+++ b/.history/pages/index_20220529004422.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+      pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004424.tsx b/.history/pages/index_20220529004424.tsx
new file mode 100644
index 0000000..f09c4f4
--- /dev/null
+++ b/.history/pages/index_20220529004424.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        <pizza
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004427.tsx b/.history/pages/index_20220529004427.tsx
new file mode 100644
index 0000000..07886dd
--- /dev/null
+++ b/.history/pages/index_20220529004427.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        <pizza/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004429.tsx b/.history/pages/index_20220529004429.tsx
new file mode 100644
index 0000000..48f6bc4
--- /dev/null
+++ b/.history/pages/index_20220529004429.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        <Pizza/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004442.tsx b/.history/pages/index_20220529004442.tsx
new file mode 100644
index 0000000..a485c63
--- /dev/null
+++ b/.history/pages/index_20220529004442.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza}}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004444.tsx b/.history/pages/index_20220529004444.tsx
new file mode 100644
index 0000000..6861d97
--- /dev/null
+++ b/.history/pages/index_20220529004444.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004449.tsx b/.history/pages/index_20220529004449.tsx
new file mode 100644
index 0000000..3792900
--- /dev/null
+++ b/.history/pages/index_20220529004449.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+      {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004451.tsx b/.history/pages/index_20220529004451.tsx
new file mode 100644
index 0000000..2338e8e
--- /dev/null
+++ b/.history/pages/index_20220529004451.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004457.tsx b/.history/pages/index_20220529004457.tsx
new file mode 100644
index 0000000..16d7479
--- /dev/null
+++ b/.history/pages/index_20220529004457.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : categories}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004504.tsx b/.history/pages/index_20220529004504.tsx
new file mode 100644
index 0000000..14af6fd
--- /dev/null
+++ b/.history/pages/index_20220529004504.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529004505.tsx b/.history/pages/index_20220529004505.tsx
new file mode 100644
index 0000000..14af6fd
--- /dev/null
+++ b/.history/pages/index_20220529004505.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144123.tsx b/.history/pages/index_20220529144123.tsx
new file mode 100644
index 0000000..2bfada0
--- /dev/null
+++ b/.history/pages/index_20220529144123.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+    
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144125.tsx b/.history/pages/index_20220529144125.tsx
new file mode 100644
index 0000000..d1b5c5f
--- /dev/null
+++ b/.history/pages/index_20220529144125.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+    
+        <MottoBlock/>
+    
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144134.tsx b/.history/pages/index_20220529144134.tsx
new file mode 100644
index 0000000..14af6fd
--- /dev/null
+++ b/.history/pages/index_20220529144134.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144425.tsx b/.history/pages/index_20220529144425.tsx
new file mode 100644
index 0000000..40d799e
--- /dev/null
+++ b/.history/pages/index_20220529144425.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+        <MottoBlock/>
+      </BoxScroll>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144430.tsx b/.history/pages/index_20220529144430.tsx
new file mode 100644
index 0000000..45e9ca1
--- /dev/null
+++ b/.history/pages/index_20220529144430.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+        <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144431.tsx b/.history/pages/index_20220529144431.tsx
new file mode 100644
index 0000000..2381992
--- /dev/null
+++ b/.history/pages/index_20220529144431.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529144432.tsx b/.history/pages/index_20220529144432.tsx
new file mode 100644
index 0000000..2381992
--- /dev/null
+++ b/.history/pages/index_20220529144432.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  //const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145218.tsx b/.history/pages/index_20220529145218.tsx
new file mode 100644
index 0000000..e6af933
--- /dev/null
+++ b/.history/pages/index_20220529145218.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145253.tsx b/.history/pages/index_20220529145253.tsx
new file mode 100644
index 0000000..1ea5f77
--- /dev/null
+++ b/.history/pages/index_20220529145253.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145911.tsx b/.history/pages/index_20220529145911.tsx
new file mode 100644
index 0000000..1c7996c
--- /dev/null
+++ b/.history/pages/index_20220529145911.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145920.tsx b/.history/pages/index_20220529145920.tsx
new file mode 100644
index 0000000..46cd163
--- /dev/null
+++ b/.history/pages/index_20220529145920.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const PizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145922.tsx b/.history/pages/index_20220529145922.tsx
new file mode 100644
index 0000000..0642bbd
--- /dev/null
+++ b/.history/pages/index_20220529145922.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? categoriesSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145928.tsx b/.history/pages/index_20220529145928.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529145928.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145929.tsx b/.history/pages/index_20220529145929.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529145929.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529145939.tsx b/.history/pages/index_20220529145939.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529145939.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529150059.tsx b/.history/pages/index_20220529150059.tsx
new file mode 100644
index 0000000..a22471e
--- /dev/null
+++ b/.history/pages/index_20220529150059.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status !== 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529151003.tsx b/.history/pages/index_20220529151003.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529151003.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529152252.tsx b/.history/pages/index_20220529152252.tsx
new file mode 100644
index 0000000..e494e67
--- /dev/null
+++ b/.history/pages/index_20220529152252.tsx
@@ -0,0 +1,51 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+     
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529152259.tsx b/.history/pages/index_20220529152259.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529152259.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529152307.tsx b/.history/pages/index_20220529152307.tsx
new file mode 100644
index 0000000..f3584ad
--- /dev/null
+++ b/.history/pages/index_20220529152307.tsx
@@ -0,0 +1,44 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529152328.tsx b/.history/pages/index_20220529152328.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529152328.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529152727.tsx b/.history/pages/index_20220529152727.tsx
new file mode 100644
index 0000000..24b74ba
--- /dev/null
+++ b/.history/pages/index_20220529152727.tsx
@@ -0,0 +1,51 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529155759.tsx b/.history/pages/index_20220529155759.tsx
new file mode 100644
index 0000000..cc1e8aa
--- /dev/null
+++ b/.history/pages/index_20220529155759.tsx
@@ -0,0 +1,45 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+   
+      
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529160403.tsx b/.history/pages/index_20220529160403.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529160403.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529160404.tsx b/.history/pages/index_20220529160404.tsx
new file mode 100644
index 0000000..5c59083
--- /dev/null
+++ b/.history/pages/index_20220529160404.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status == 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220529160405.tsx b/.history/pages/index_20220529160405.tsx
new file mode 100644
index 0000000..b55429c
--- /dev/null
+++ b/.history/pages/index_20220529160405.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190403.tsx b/.history/pages/index_20220530190403.tsx
new file mode 100644
index 0000000..c06b31e
--- /dev/null
+++ b/.history/pages/index_20220530190403.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190409.tsx b/.history/pages/index_20220530190409.tsx
new file mode 100644
index 0000000..5b22a7d
--- /dev/null
+++ b/.history/pages/index_20220530190409.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock,  }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190412.tsx b/.history/pages/index_20220530190412.tsx
new file mode 100644
index 0000000..c02b2be
--- /dev/null
+++ b/.history/pages/index_20220530190412.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190414.tsx b/.history/pages/index_20220530190414.tsx
new file mode 100644
index 0000000..ac5df63
--- /dev/null
+++ b/.history/pages/index_20220530190414.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock,  }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190421.tsx b/.history/pages/index_20220530190421.tsx
new file mode 100644
index 0000000..42b9a05
--- /dev/null
+++ b/.history/pages/index_20220530190421.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock,  }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190425.tsx b/.history/pages/index_20220530190425.tsx
new file mode 100644
index 0000000..68a07dd
--- /dev/null
+++ b/.history/pages/index_20220530190425.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton,  }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190434.tsx b/.history/pages/index_20220530190434.tsx
new file mode 100644
index 0000000..38d7ec7
--- /dev/null
+++ b/.history/pages/index_20220530190434.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190441.tsx b/.history/pages/index_20220530190441.tsx
new file mode 100644
index 0000000..0f86ae9
--- /dev/null
+++ b/.history/pages/index_20220530190441.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton }
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190446.tsx b/.history/pages/index_20220530190446.tsx
new file mode 100644
index 0000000..b7dcd9d
--- /dev/null
+++ b/.history/pages/index_20220530190446.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from 
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190448.tsx b/.history/pages/index_20220530190448.tsx
new file mode 100644
index 0000000..28868e5
--- /dev/null
+++ b/.history/pages/index_20220530190448.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '.'
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190450.tsx b/.history/pages/index_20220530190450.tsx
new file mode 100644
index 0000000..3cf0a94
--- /dev/null
+++ b/.history/pages/index_20220530190450.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from './'
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190453.tsx b/.history/pages/index_20220530190453.tsx
new file mode 100644
index 0000000..265d41a
--- /dev/null
+++ b/.history/pages/index_20220530190453.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../'
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190456.tsx b/.history/pages/index_20220530190456.tsx
new file mode 100644
index 0000000..d1699f3
--- /dev/null
+++ b/.history/pages/index_20220530190456.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/'
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190458.tsx b/.history/pages/index_20220530190458.tsx
new file mode 100644
index 0000000..3a300aa
--- /dev/null
+++ b/.history/pages/index_20220530190458.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/'
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190500.tsx b/.history/pages/index_20220530190500.tsx
new file mode 100644
index 0000000..c86f5ca
--- /dev/null
+++ b/.history/pages/index_20220530190500.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { CardStock, SkeletonStock, BoxScroll, Box, MottoBlock,
+        CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190507.tsx b/.history/pages/index_20220530190507.tsx
new file mode 100644
index 0000000..87bcaef
--- /dev/null
+++ b/.history/pages/index_20220530190507.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { CardStock, SkeletonStock, BoxScroll, Box, ,
+        CategoriesButton, CategoriesSkeleton,  } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190509.tsx b/.history/pages/index_20220530190509.tsx
new file mode 100644
index 0000000..8f384c2
--- /dev/null
+++ b/.history/pages/index_20220530190509.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { CardStock, SkeletonStock, BoxScroll, Box, ,
+        CategoriesButton, ,  } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190510.tsx b/.history/pages/index_20220530190510.tsx
new file mode 100644
index 0000000..ccba546
--- /dev/null
+++ b/.history/pages/index_20220530190510.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { CardStock, SkeletonStock, BoxScroll, Box, ,
+        , ,  } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190517.tsx b/.history/pages/index_20220530190517.tsx
new file mode 100644
index 0000000..6d3c5ef
--- /dev/null
+++ b/.history/pages/index_20220530190517.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import {  BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190522.tsx b/.history/pages/index_20220530190522.tsx
new file mode 100644
index 0000000..6448b49
--- /dev/null
+++ b/.history/pages/index_20220530190522.tsx
@@ -0,0 +1,53 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190530.tsx b/.history/pages/index_20220530190530.tsx
new file mode 100644
index 0000000..42cc57c
--- /dev/null
+++ b/.history/pages/index_20220530190530.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, 
+        SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190532.tsx b/.history/pages/index_20220530190532.tsx
new file mode 100644
index 0000000..0ea2463
--- /dev/null
+++ b/.history/pages/index_20220530190532.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { CardStock, 
+          SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190535.tsx b/.history/pages/index_20220530190535.tsx
new file mode 100644
index 0000000..c2e1c3a
--- /dev/null
+++ b/.history/pages/index_20220530190535.tsx
@@ -0,0 +1,54 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock, 
+          SkeletonStock, MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190536.tsx b/.history/pages/index_20220530190536.tsx
new file mode 100644
index 0000000..a59730a
--- /dev/null
+++ b/.history/pages/index_20220530190536.tsx
@@ -0,0 +1,55 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock, 
+          SkeletonStock, 
+          MottoBlock, CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190538.tsx b/.history/pages/index_20220530190538.tsx
new file mode 100644
index 0000000..0e67f1b
--- /dev/null
+++ b/.history/pages/index_20220530190538.tsx
@@ -0,0 +1,56 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock, 
+          SkeletonStock, 
+          MottoBlock, 
+          CategoriesButton, CategoriesSkeleton, PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190540.tsx b/.history/pages/index_20220530190540.tsx
new file mode 100644
index 0000000..97c624c
--- /dev/null
+++ b/.history/pages/index_20220530190540.tsx
@@ -0,0 +1,58 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock, 
+          SkeletonStock, 
+          MottoBlock, 
+          CategoriesButton, 
+          CategoriesSkeleton, 
+          PizzaBlock, PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190541.tsx b/.history/pages/index_20220530190541.tsx
new file mode 100644
index 0000000..25b98af
--- /dev/null
+++ b/.history/pages/index_20220530190541.tsx
@@ -0,0 +1,59 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock, 
+          SkeletonStock, 
+          MottoBlock, 
+          CategoriesButton, 
+          CategoriesSkeleton, 
+          PizzaBlock, 
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190545.tsx b/.history/pages/index_20220530190545.tsx
new file mode 100644
index 0000000..37fa266
--- /dev/null
+++ b/.history/pages/index_20220530190545.tsx
@@ -0,0 +1,59 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190618.tsx b/.history/pages/index_20220530190618.tsx
new file mode 100644
index 0000000..68a5901
--- /dev/null
+++ b/.history/pages/index_20220530190618.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+
+import { useAppDispatch } from '../redux/store';
+
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190630.tsx b/.history/pages/index_20220530190630.tsx
new file mode 100644
index 0000000..ecde047
--- /dev/null
+++ b/.history/pages/index_20220530190630.tsx
@@ -0,0 +1,59 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190632.tsx b/.history/pages/index_20220530190632.tsx
new file mode 100644
index 0000000..073c873
--- /dev/null
+++ b/.history/pages/index_20220530190632.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190700.tsx b/.history/pages/index_20220530190700.tsx
new file mode 100644
index 0000000..9c5119a
--- /dev/null
+++ b/.history/pages/index_20220530190700.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190702.tsx b/.history/pages/index_20220530190702.tsx
new file mode 100644
index 0000000..7b38b68
--- /dev/null
+++ b/.history/pages/index_20220530190702.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../../';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190704.tsx b/.history/pages/index_20220530190704.tsx
new file mode 100644
index 0000000..9c5119a
--- /dev/null
+++ b/.history/pages/index_20220530190704.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190707.tsx b/.history/pages/index_20220530190707.tsx
new file mode 100644
index 0000000..b791bdb
--- /dev/null
+++ b/.history/pages/index_20220530190707.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components/';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190709.tsx b/.history/pages/index_20220530190709.tsx
new file mode 100644
index 0000000..e785619
--- /dev/null
+++ b/.history/pages/index_20220530190709.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components/customer/';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190711.tsx b/.history/pages/index_20220530190711.tsx
new file mode 100644
index 0000000..0247af6
--- /dev/null
+++ b/.history/pages/index_20220530190711.tsx
@@ -0,0 +1,60 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190736.tsx b/.history/pages/index_20220530190736.tsx
new file mode 100644
index 0000000..f04ff3b
--- /dev/null
+++ b/.history/pages/index_20220530190736.tsx
@@ -0,0 +1,61 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import { BoxScroll, 
+  Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190739.tsx b/.history/pages/index_20220530190739.tsx
new file mode 100644
index 0000000..1da54a3
--- /dev/null
+++ b/.history/pages/index_20220530190739.tsx
@@ -0,0 +1,61 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import {  BoxScroll, 
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190740.tsx b/.history/pages/index_20220530190740.tsx
new file mode 100644
index 0000000..4f8c267
--- /dev/null
+++ b/.history/pages/index_20220530190740.tsx
@@ -0,0 +1,61 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190742.tsx b/.history/pages/index_20220530190742.tsx
new file mode 100644
index 0000000..0092d0f
--- /dev/null
+++ b/.history/pages/index_20220530190742.tsx
@@ -0,0 +1,62 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block'
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190745.tsx b/.history/pages/index_20220530190745.tsx
new file mode 100644
index 0000000..16558bb
--- /dev/null
+++ b/.history/pages/index_20220530190745.tsx
@@ -0,0 +1,63 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block';
+          
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190747.tsx b/.history/pages/index_20220530190747.tsx
new file mode 100644
index 0000000..562067c
--- /dev/null
+++ b/.history/pages/index_20220530190747.tsx
@@ -0,0 +1,63 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190803.tsx b/.history/pages/index_20220530190803.tsx
new file mode 100644
index 0000000..3c04ad0
--- /dev/null
+++ b/.history/pages/index_20220530190803.tsx
@@ -0,0 +1,66 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190831.tsx b/.history/pages/index_20220530190831.tsx
new file mode 100644
index 0000000..c988729
--- /dev/null
+++ b/.history/pages/index_20220530190831.tsx
@@ -0,0 +1,67 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190837.tsx b/.history/pages/index_20220530190837.tsx
new file mode 100644
index 0000000..88550a6
--- /dev/null
+++ b/.history/pages/index_20220530190837.tsx
@@ -0,0 +1,67 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220530190839.tsx b/.history/pages/index_20220530190839.tsx
new file mode 100644
index 0000000..e028db4
--- /dev/null
+++ b/.history/pages/index_20220530190839.tsx
@@ -0,0 +1,67 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160602.tsx b/.history/pages/index_20220531160602.tsx
new file mode 100644
index 0000000..acbdfce
--- /dev/null
+++ b/.history/pages/index_20220531160602.tsx
@@ -0,0 +1,68 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+      <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160612.tsx b/.history/pages/index_20220531160612.tsx
new file mode 100644
index 0000000..37db7cb
--- /dev/null
+++ b/.history/pages/index_20220531160612.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+      <script type="text/javascript" 
+        charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160614.tsx b/.history/pages/index_20220531160614.tsx
new file mode 100644
index 0000000..a50ffec
--- /dev/null
+++ b/.history/pages/index_20220531160614.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript" 
+        charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160616.tsx b/.history/pages/index_20220531160616.tsx
new file mode 100644
index 0000000..89c4e88
--- /dev/null
+++ b/.history/pages/index_20220531160616.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript" 
+        async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160618.tsx b/.history/pages/index_20220531160618.tsx
new file mode 100644
index 0000000..5ab5991
--- /dev/null
+++ b/.history/pages/index_20220531160618.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript" 
+         async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160620.tsx b/.history/pages/index_20220531160620.tsx
new file mode 100644
index 0000000..324d10c
--- /dev/null
+++ b/.history/pages/index_20220531160620.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript"
+         async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160625.tsx b/.history/pages/index_20220531160625.tsx
new file mode 100644
index 0000000..b2006c0
--- /dev/null
+++ b/.history/pages/index_20220531160625.tsx
@@ -0,0 +1,71 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript"
+         async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+           
+         </script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160628.tsx b/.history/pages/index_20220531160628.tsx
new file mode 100644
index 0000000..b1bfaf5
--- /dev/null
+++ b/.history/pages/index_20220531160628.tsx
@@ -0,0 +1,70 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript"
+         async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160631.tsx b/.history/pages/index_20220531160631.tsx
new file mode 100644
index 0000000..0bf7409
--- /dev/null
+++ b/.history/pages/index_20220531160631.tsx
@@ -0,0 +1,70 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+         </script>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531160913.tsx b/.history/pages/index_20220531160913.tsx
new file mode 100644
index 0000000..30351c6
--- /dev/null
+++ b/.history/pages/index_20220531160913.tsx
@@ -0,0 +1,68 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531161012.tsx b/.history/pages/index_20220531161012.tsx
new file mode 100644
index 0000000..ade9792
--- /dev/null
+++ b/.history/pages/index_20220531161012.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531161020.tsx b/.history/pages/index_20220531161020.tsx
new file mode 100644
index 0000000..a5d0b34
--- /dev/null
+++ b/.history/pages/index_20220531161020.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531161037.tsx b/.history/pages/index_20220531161037.tsx
new file mode 100644
index 0000000..a5d0b34
--- /dev/null
+++ b/.history/pages/index_20220531161037.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531162101.tsx b/.history/pages/index_20220531162101.tsx
new file mode 100644
index 0000000..69f3239
--- /dev/null
+++ b/.history/pages/index_20220531162101.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/Pages/Index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531162131.tsx b/.history/pages/index_20220531162131.tsx
new file mode 100644
index 0000000..7e1e0a1
--- /dev/null
+++ b/.history/pages/index_20220531162131.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/Index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220531162144.tsx b/.history/pages/index_20220531162144.tsx
new file mode 100644
index 0000000..5a1c97e
--- /dev/null
+++ b/.history/pages/index_20220531162144.tsx
@@ -0,0 +1,69 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220601090400.tsx b/.history/pages/index_20220601090400.tsx
new file mode 100644
index 0000000..68ac8fb
--- /dev/null
+++ b/.history/pages/index_20220601090400.tsx
@@ -0,0 +1,72 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220601090633.tsx b/.history/pages/index_20220601090633.tsx
new file mode 100644
index 0000000..a573607
--- /dev/null
+++ b/.history/pages/index_20220601090633.tsx
@@ -0,0 +1,72 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+ 
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220601090650.tsx b/.history/pages/index_20220601090650.tsx
new file mode 100644
index 0000000..68ac8fb
--- /dev/null
+++ b/.history/pages/index_20220601090650.tsx
@@ -0,0 +1,72 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/.history/pages/index_20220602164615.tsx b/.history/pages/index_20220602164615.tsx
new file mode 100644
index 0000000..cfc35e4
--- /dev/null
+++ b/.history/pages/index_20220602164615.tsx
@@ -0,0 +1,73 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220602164752.tsx b/.history/pages/index_20220602164752.tsx
new file mode 100644
index 0000000..4619523
--- /dev/null
+++ b/.history/pages/index_20220602164752.tsx
@@ -0,0 +1,76 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+
+      </Box>
+      {router.query.image && ( console.log(router.query.image))}
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220602164850.tsx b/.history/pages/index_20220602164850.tsx
new file mode 100644
index 0000000..78c9d68
--- /dev/null
+++ b/.history/pages/index_20220602164850.tsx
@@ -0,0 +1,75 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220602164903.tsx b/.history/pages/index_20220602164903.tsx
new file mode 100644
index 0000000..1c538d1
--- /dev/null
+++ b/.history/pages/index_20220602164903.tsx
@@ -0,0 +1,75 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router);
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603173104.tsx b/.history/pages/index_20220603173104.tsx
new file mode 100644
index 0000000..1163930
--- /dev/null
+++ b/.history/pages/index_20220603173104.tsx
@@ -0,0 +1,74 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query);
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603173135.tsx b/.history/pages/index_20220603173135.tsx
new file mode 100644
index 0000000..a2bb375
--- /dev/null
+++ b/.history/pages/index_20220603173135.tsx
@@ -0,0 +1,74 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza);
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603173151.tsx b/.history/pages/index_20220603173151.tsx
new file mode 100644
index 0000000..c1d39b0
--- /dev/null
+++ b/.history/pages/index_20220603173151.tsx
@@ -0,0 +1,74 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, pizza);
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603173154.tsx b/.history/pages/index_20220603173154.tsx
new file mode 100644
index 0000000..48c8508
--- /dev/null
+++ b/.history/pages/index_20220603173154.tsx
@@ -0,0 +1,74 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+    <PizzaCard > wwww</PizzaCard>
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603174511.tsx b/.history/pages/index_20220603174511.tsx
new file mode 100644
index 0000000..7495c19
--- /dev/null
+++ b/.history/pages/index_20220603174511.tsx
@@ -0,0 +1,77 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.image && (
+        <PizzaCard id={router.query.image} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603174555.tsx b/.history/pages/index_20220603174555.tsx
new file mode 100644
index 0000000..7495c19
--- /dev/null
+++ b/.history/pages/index_20220603174555.tsx
@@ -0,0 +1,77 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.image && (
+        <PizzaCard id={router.query.image} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603174614.tsx b/.history/pages/index_20220603174614.tsx
new file mode 100644
index 0000000..7495c19
--- /dev/null
+++ b/.history/pages/index_20220603174614.tsx
@@ -0,0 +1,77 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.image && (
+        <PizzaCard id={router.query.image} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220603174722.tsx b/.history/pages/index_20220603174722.tsx
new file mode 100644
index 0000000..e58f35f
--- /dev/null
+++ b/.history/pages/index_20220603174722.tsx
@@ -0,0 +1,77 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux'
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220615162448.tsx b/.history/pages/index_20220615162448.tsx
new file mode 100644
index 0000000..0d5629d
--- /dev/null
+++ b/.history/pages/index_20220615162448.tsx
@@ -0,0 +1,77 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220616125418.tsx b/.history/pages/index_20220616125418.tsx
new file mode 100644
index 0000000..3f39d3d
--- /dev/null
+++ b/.history/pages/index_20220616125418.tsx
@@ -0,0 +1,81 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+
+
+const Home: NextPage = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  type Props = {
+    id: number ;
+  };
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard<Props> id:number={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220616125725.tsx b/.history/pages/index_20220616125725.tsx
new file mode 100644
index 0000000..bba9f12
--- /dev/null
+++ b/.history/pages/index_20220616125725.tsx
@@ -0,0 +1,79 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220617161335.tsx b/.history/pages/index_20220617161335.tsx
new file mode 100644
index 0000000..bba9f12
--- /dev/null
+++ b/.history/pages/index_20220617161335.tsx
@@ -0,0 +1,79 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220617162547.tsx b/.history/pages/index_20220617162547.tsx
new file mode 100644
index 0000000..06d5e3f
--- /dev/null
+++ b/.history/pages/index_20220617162547.tsx
@@ -0,0 +1,85 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  if (router.query.pizza) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "visible";
+  }
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220617162616.tsx b/.history/pages/index_20220617162616.tsx
new file mode 100644
index 0000000..9dd7c31
--- /dev/null
+++ b/.history/pages/index_20220617162616.tsx
@@ -0,0 +1,84 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [1]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220617162646.tsx b/.history/pages/index_20220617162646.tsx
new file mode 100644
index 0000000..9506fd9
--- /dev/null
+++ b/.history/pages/index_20220617162646.tsx
@@ -0,0 +1,84 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220617162725.tsx b/.history/pages/index_20220617162725.tsx
new file mode 100644
index 0000000..a95e070
--- /dev/null
+++ b/.history/pages/index_20220617162725.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220617190745.tsx b/.history/pages/index_20220617190745.tsx
new file mode 100644
index 0000000..a95e070
--- /dev/null
+++ b/.history/pages/index_20220617190745.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.pizza, 'pizza');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618072502.tsx b/.history/pages/index_20220618072502.tsx
new file mode 100644
index 0000000..4fa6746
--- /dev/null
+++ b/.history/pages/index_20220618072502.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618072534.tsx b/.history/pages/index_20220618072534.tsx
new file mode 100644
index 0000000..6ad9987
--- /dev/null
+++ b/.history/pages/index_20220618072534.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618072601.tsx b/.history/pages/index_20220618072601.tsx
new file mode 100644
index 0000000..8e2a29d
--- /dev/null
+++ b/.history/pages/index_20220618072601.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.route, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618073544.tsx b/.history/pages/index_20220618073544.tsx
new file mode 100644
index 0000000..4fa6746
--- /dev/null
+++ b/.history/pages/index_20220618073544.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618073647.tsx b/.history/pages/index_20220618073647.tsx
new file mode 100644
index 0000000..63e7ed3
--- /dev/null
+++ b/.history/pages/index_20220618073647.tsx
@@ -0,0 +1,87 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza || router.query.cart) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618073946.tsx b/.history/pages/index_20220618073946.tsx
new file mode 100644
index 0000000..381e455
--- /dev/null
+++ b/.history/pages/index_20220618073946.tsx
@@ -0,0 +1,89 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard, PizzaCart } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza || router.query.cart) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza, router.query.cart]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+      {router.query.cart && (
+        <PizzaCart id={undefined} />
+      )}
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618074031.tsx b/.history/pages/index_20220618074031.tsx
new file mode 100644
index 0000000..3915b8d
--- /dev/null
+++ b/.history/pages/index_20220618074031.tsx
@@ -0,0 +1,89 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard, PizzaCart } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.cart, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza || router.query.cart) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza, router.query.cart]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+      {router.query.cart && (
+        <PizzaCart id={undefined} />
+      )}
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618074103.tsx b/.history/pages/index_20220618074103.tsx
new file mode 100644
index 0000000..381e455
--- /dev/null
+++ b/.history/pages/index_20220618074103.tsx
@@ -0,0 +1,89 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard, PizzaCart } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza || router.query.cart) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza, router.query.cart]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+      {router.query.cart && (
+        <PizzaCart id={undefined} />
+      )}
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/index_20220618081119.tsx b/.history/pages/index_20220618081119.tsx
new file mode 100644
index 0000000..3915b8d
--- /dev/null
+++ b/.history/pages/index_20220618081119.tsx
@@ -0,0 +1,89 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard, PizzaCart } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.cart, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza || router.query.cart) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza, router.query.cart]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+      {router.query.cart && (
+        <PizzaCart id={undefined} />
+      )}
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/.history/pages/pizza/[id]_20220602160944.tsx b/.history/pages/pizza/[id]_20220602160944.tsx
new file mode 100644
index 0000000..638b712
--- /dev/null
+++ b/.history/pages/pizza/[id]_20220602160944.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter()
+    const { pid } = router.query
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {pid}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/pizza/[id]_20220602161323.tsx b/.history/pages/pizza/[id]_20220602161323.tsx
new file mode 100644
index 0000000..e5d0200
--- /dev/null
+++ b/.history/pages/pizza/[id]_20220602161323.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter()
+    const { id } = router.query
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {id}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/pizza/[id]_20220602161422.tsx b/.history/pages/pizza/[id]_20220602161422.tsx
new file mode 100644
index 0000000..3a7cf81
--- /dev/null
+++ b/.history/pages/pizza/[id]_20220602161422.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter()
+    const { id } = router.query
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {id}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/pizza/[id]_20220602161904.tsx b/.history/pages/pizza/[id]_20220602161904.tsx
new file mode 100644
index 0000000..b649958
--- /dev/null
+++ b/.history/pages/pizza/[id]_20220602161904.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { id } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {id}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/pizza/id_20220602161322.tsx b/.history/pages/pizza/id_20220602161322.tsx
new file mode 100644
index 0000000..e5d0200
--- /dev/null
+++ b/.history/pages/pizza/id_20220602161322.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter()
+    const { id } = router.query
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {id}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/.history/pages/pizza/id_20220602161423.tsx b/.history/pages/pizza/id_20220602161423.tsx
new file mode 100644
index 0000000..3a7cf81
--- /dev/null
+++ b/.history/pages/pizza/id_20220602161423.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter()
+    const { id } = router.query
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ')}>
+                <div className={classNames('modal_content ')}>
+                    <div className='modal_body'>
+                    <p>Post: {id}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/.history/pages/private_20220525194813.jsx b/.history/pages/private_20220525194813.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/private_20220525194822.jsx b/.history/pages/private_20220525194822.jsx
new file mode 100644
index 0000000..7f7f024
--- /dev/null
+++ b/.history/pages/private_20220525194822.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { withIronSession } from "next-iron-session";
+
+const PrivatePage = ({ user }) => (
+  <div>
+    <h1>Hello {user.email}</h1>
+    <p>Secret things live here...</p>
+  </div>
+);
+
+export const getServerSideProps = withIronSession(
+  async ({ req, res }) => {
+    const user = req.session.get("user");
+
+    if (!user) {
+      res.statusCode = 404;
+      res.end();
+      return { props: {} };
+    }
+
+    return {
+      props: { user }
+    };
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
+
+export default PrivatePage;
diff --git a/.history/pages/signin_20220525194830.jsx b/.history/pages/signin_20220525194830.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/.history/pages/signin_20220525194839.jsx b/.history/pages/signin_20220525194839.jsx
new file mode 100644
index 0000000..091155b
--- /dev/null
+++ b/.history/pages/signin_20220525194839.jsx
@@ -0,0 +1,45 @@
+import React, { useRef } from "react";
+import { useRouter } from "next/router";
+
+const SignInPage = () => {
+  const router = useRouter();
+  const emailInput = useRef();
+  const passwordInput = useRef();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const email = emailInput.current.value;
+    const password = passwordInput.current.value;
+
+    const response = await fetch("/sessions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password })
+    });
+
+    if (response.ok) {
+      return router.push("/private");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>
+          Email: <input type="text" ref={emailInput} />
+        </label>
+      </div>
+      <div>
+        <label>
+          Password: <input type="password" ref={passwordInput} />
+        </label>
+      </div>
+      <div>
+        <button type="submit">Sign in</button>
+      </div>
+    </form>
+  );
+};
+
+export default SignInPage;
diff --git a/.history/redux/Categories/selectors_20220528224942.ts b/.history/redux/Categories/selectors_20220528224942.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/Categories/selectors_20220528225443.ts b/.history/redux/Categories/selectors_20220528225443.ts
new file mode 100644
index 0000000..dfd5c73
--- /dev/null
+++ b/.history/redux/Categories/selectors_20220528225443.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectCategoriesData = (state: RootState) => state.categories;
diff --git a/.history/redux/Categories/slice_20220528224950.ts b/.history/redux/Categories/slice_20220528224950.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/Categories/slice_20220528225402.ts b/.history/redux/Categories/slice_20220528225402.ts
new file mode 100644
index 0000000..b226dbb
--- /dev/null
+++ b/.history/redux/Categories/slice_20220528225402.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories: [],
+    status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'Categories',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Categories[]>) {
+      state.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (state, action) => {
+      state.categories = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.categories = [];
+    });
+  },
+});
+
+export const { setItems } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/Categories/stock_20220528225000.ts b/.history/redux/Categories/stock_20220528225000.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/Categories/stock_20220528225156.ts b/.history/redux/Categories/stock_20220528225156.ts
new file mode 100644
index 0000000..565c148
--- /dev/null
+++ b/.history/redux/Categories/stock_20220528225156.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Categories } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+     // console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/Categories/types_20220528225012.ts b/.history/redux/Categories/types_20220528225012.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/Categories/types_20220528225114.ts b/.history/redux/Categories/types_20220528225114.ts
new file mode 100644
index 0000000..0763c70
--- /dev/null
+++ b/.history/redux/Categories/types_20220528225114.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    id: number;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories: Categories[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/selectors_20220518131315.ts b/.history/redux/cards/selectors_20220518131315.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/cards/selectors_20220518131334.ts b/.history/redux/cards/selectors_20220518131334.ts
new file mode 100644
index 0000000..e9d5554
--- /dev/null
+++ b/.history/redux/cards/selectors_20220518131334.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectStokeData = (state: RootState) => state.stoke;
diff --git a/.history/redux/cards/slice_20220518125527.ts b/.history/redux/cards/slice_20220518125527.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/cards/slice_20220518125545.ts b/.history/redux/cards/slice_20220518125545.ts
new file mode 100644
index 0000000..c837c17
--- /dev/null
+++ b/.history/redux/cards/slice_20220518125545.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizzas } from './asyncActions';
+import { Pizza, PizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Pizza[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizzas.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchPizzas.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/cards/slice_20220518125652.ts b/.history/redux/cards/slice_20220518125652.ts
new file mode 100644
index 0000000..13de00f
--- /dev/null
+++ b/.history/redux/cards/slice_20220518125652.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizzas } from './stock';
+import { Pizza, PizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Pizza[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizzas.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchPizzas.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/cards/slice_20220518125716.ts b/.history/redux/cards/slice_20220518125716.ts
new file mode 100644
index 0000000..5a478a2
--- /dev/null
+++ b/.history/redux/cards/slice_20220518125716.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StokeSliceState, Status } from './types';
+
+const initialState: StokeSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Pizza[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizzas.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchPizzas.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/cards/slice_20220518125757.ts b/.history/redux/cards/slice_20220518125757.ts
new file mode 100644
index 0000000..314848c
--- /dev/null
+++ b/.history/redux/cards/slice_20220518125757.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StockSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Stoke[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/cards/slice_20220518130450.ts b/.history/redux/cards/slice_20220518130450.ts
new file mode 100644
index 0000000..4dae350
--- /dev/null
+++ b/.history/redux/cards/slice_20220518130450.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StockSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'stoke',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Stoke[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/cards/slice_20220518133433.ts b/.history/redux/cards/slice_20220518133433.ts
new file mode 100644
index 0000000..48dacb7
--- /dev/null
+++ b/.history/redux/cards/slice_20220518133433.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StockSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const stokeSlice = createSlice({
+  name: 'stoke',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Stoke[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = stokeSlice.actions;
+
+export default stokeSlice.reducer;
diff --git a/.history/redux/cards/stock_20220518112222.ts b/.history/redux/cards/stock_20220518112222.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/cards/stock_20220518112241.ts b/.history/redux/cards/stock_20220518112241.ts
new file mode 100644
index 0000000..39544bf
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112241.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518112407.ts b/.history/redux/cards/stock_20220518112407.ts
new file mode 100644
index 0000000..39544bf
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112407.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518112428.ts b/.history/redux/cards/stock_20220518112428.ts
new file mode 100644
index 0000000..032ecc1
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112428.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(`http://localhost:3000/api/loadingStock`, {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518112511.ts b/.history/redux/cards/stock_20220518112511.ts
new file mode 100644
index 0000000..ef8e9cd
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112511.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'/api/loadingStock', {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518112531.ts b/.history/redux/cards/stock_20220518112531.ts
new file mode 100644
index 0000000..34af4ed
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112531.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'api/loadingStock', {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518112534.ts b/.history/redux/cards/stock_20220518112534.ts
new file mode 100644
index 0000000..6df9c2d
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112534.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock', {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518112558.ts b/.history/redux/cards/stock_20220518112558.ts
new file mode 100644
index 0000000..6df9c2d
--- /dev/null
+++ b/.history/redux/cards/stock_20220518112558.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock', {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518113444.ts b/.history/redux/cards/stock_20220518113444.ts
new file mode 100644
index 0000000..cb05071
--- /dev/null
+++ b/.history/redux/cards/stock_20220518113444.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<[]>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock');
+
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518113515.ts b/.history/redux/cards/stock_20220518113515.ts
new file mode 100644
index 0000000..8dcb3e5
--- /dev/null
+++ b/.history/redux/cards/stock_20220518113515.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<[]>(
+  'pizza/fetchPizzasStatus',
+  async () => {
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock');
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518113537.ts b/.history/redux/cards/stock_20220518113537.ts
new file mode 100644
index 0000000..fecb4f8
--- /dev/null
+++ b/.history/redux/cards/stock_20220518113537.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<[]>(
+  'pizza/fetchPizzasStatus',
+  async () => {
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock');
+    console.log(data);
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518113719.ts b/.history/redux/cards/stock_20220518113719.ts
new file mode 100644
index 0000000..1ff088d
--- /dev/null
+++ b/.history/redux/cards/stock_20220518113719.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<[]>(
+  'pizza/fetchPizzasStatus',
+  async (123) => {
+    const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock');
+    console.log(data);
+    return data;
+  },
+);
diff --git a/.history/redux/cards/stock_20220518113823.ts b/.history/redux/cards/stock_20220518113823.ts
new file mode 100644
index 0000000..60044ae
--- /dev/null
+++ b/.history/redux/cards/stock_20220518113823.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+      const { sortBy, order, category, search, currentPage } = params;
+      console.log(params, 4444);
+      const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      });
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518113855.ts b/.history/redux/cards/stock_20220518113855.ts
new file mode 100644
index 0000000..e54b8c0
--- /dev/null
+++ b/.history/redux/cards/stock_20220518113855.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+      const { sortBy, order, category, search, currentPage } = params;
+      console.log(process.env.SITE+'loadingStock');
+      const { data } = await axios.get<Pizza[]>(process.env.SITE+'loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      });
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518115010.ts b/.history/redux/cards/stock_20220518115010.ts
new file mode 100644
index 0000000..18f25f8
--- /dev/null
+++ b/.history/redux/cards/stock_20220518115010.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+      const { sortBy, order, category, search, currentPage } = params;
+      console.log(process.env.SITE+'loadingStock');
+      const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      });
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518115128.ts b/.history/redux/cards/stock_20220518115128.ts
new file mode 100644
index 0000000..7eb17f9
--- /dev/null
+++ b/.history/redux/cards/stock_20220518115128.ts
@@ -0,0 +1,27 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+      const { sortBy, order, category, search, currentPage } = params;
+      const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      });
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518115143.ts b/.history/redux/cards/stock_20220518115143.ts
new file mode 100644
index 0000000..3a52e98
--- /dev/null
+++ b/.history/redux/cards/stock_20220518115143.ts
@@ -0,0 +1,27 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+      const { sortBy, order, category, search, currentPage } = params;
+      const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      });
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518115421.ts b/.history/redux/cards/stock_20220518115421.ts
new file mode 100644
index 0000000..86a7570
--- /dev/null
+++ b/.history/redux/cards/stock_20220518115421.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+        let data = '123';
+      //const { sortBy, order, category, search, currentPage } = params;
+      /*const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      }); */
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518115458.ts b/.history/redux/cards/stock_20220518115458.ts
new file mode 100644
index 0000000..4b9b4ea
--- /dev/null
+++ b/.history/redux/cards/stock_20220518115458.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+        let data = '123';
+      //const { sortBy, order, category, search, currentPage } = params;
+      /*const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      }); */
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518115631.ts b/.history/redux/cards/stock_20220518115631.ts
new file mode 100644
index 0000000..a60c99e
--- /dev/null
+++ b/.history/redux/cards/stock_20220518115631.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+        const data = '123';
+      //const { sortBy, order, category, search, currentPage } = params;
+      /*const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      }); */
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518120005.ts b/.history/redux/cards/stock_20220518120005.ts
new file mode 100644
index 0000000..a60c99e
--- /dev/null
+++ b/.history/redux/cards/stock_20220518120005.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async (params) => {
+        const data = '123';
+      //const { sortBy, order, category, search, currentPage } = params;
+      /*const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      }); */
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518120748.ts b/.history/redux/cards/stock_20220518120748.ts
new file mode 100644
index 0000000..24be001
--- /dev/null
+++ b/.history/redux/cards/stock_20220518120748.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async () => {
+        const data = '123';
+      //const { sortBy, order, category, search, currentPage } = params;
+      /*const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      }); */
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518120942.ts b/.history/redux/cards/stock_20220518120942.ts
new file mode 100644
index 0000000..7e97555
--- /dev/null
+++ b/.history/redux/cards/stock_20220518120942.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async (fetchStoke) => {
+        const data = '123';
+      //const { sortBy, order, category, search, currentPage } = params;
+      /*const { data } = await axios.get<Pizza[]>('http://localhost:3000/api/loadingStock', {
+        params: pickBy(
+          {
+            page: currentPage,
+            limit: 4,
+            category,
+            sortBy,
+            order,
+            search,
+          },
+          identity,
+        ),
+      }); */
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518124555.ts b/.history/redux/cards/stock_20220518124555.ts
new file mode 100644
index 0000000..113effd
--- /dev/null
+++ b/.history/redux/cards/stock_20220518124555.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518124613.ts b/.history/redux/cards/stock_20220518124613.ts
new file mode 100644
index 0000000..2f812a3
--- /dev/null
+++ b/.history/redux/cards/stock_20220518124613.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk<Pizza[], SearchPizzaParams>(
+    'pizza/fetchPizzasStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518124654.ts b/.history/redux/cards/stock_20220518124654.ts
new file mode 100644
index 0000000..16b6962
--- /dev/null
+++ b/.history/redux/cards/stock_20220518124654.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518125228.ts b/.history/redux/cards/stock_20220518125228.ts
new file mode 100644
index 0000000..6c54596
--- /dev/null
+++ b/.history/redux/cards/stock_20220518125228.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'pizza/fetchPizzasStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518125242.ts b/.history/redux/cards/stock_20220518125242.ts
new file mode 100644
index 0000000..13ffe08
--- /dev/null
+++ b/.history/redux/cards/stock_20220518125242.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518131119.ts b/.history/redux/cards/stock_20220518131119.ts
new file mode 100644
index 0000000..8bd91ee
--- /dev/null
+++ b/.history/redux/cards/stock_20220518131119.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518131140.ts b/.history/redux/cards/stock_20220518131140.ts
new file mode 100644
index 0000000..a57e59c
--- /dev/null
+++ b/.history/redux/cards/stock_20220518131140.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      //console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/stock_20220518133603.ts b/.history/redux/cards/stock_20220518133603.ts
new file mode 100644
index 0000000..8bd91ee
--- /dev/null
+++ b/.history/redux/cards/stock_20220518133603.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/cards/types_20220518112341.ts b/.history/redux/cards/types_20220518112341.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/cards/types_20220518112352.ts b/.history/redux/cards/types_20220518112352.ts
new file mode 100644
index 0000000..1874490
--- /dev/null
+++ b/.history/redux/cards/types_20220518112352.ts
@@ -0,0 +1,28 @@
+export type Pizza = {
+    id: string;
+    title: string;
+    price: number;
+    imageUrl: string;
+    sizes: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type SearchPizzaParams = {
+    sortBy: string;
+    order: string;
+    category: string;
+    search: string;
+    currentPage: string;
+  };
+
+  export interface PizzaSliceState {
+    items: Pizza[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125020.ts b/.history/redux/cards/types_20220518125020.ts
new file mode 100644
index 0000000..a4cb5f7
--- /dev/null
+++ b/.history/redux/cards/types_20220518125020.ts
@@ -0,0 +1,28 @@
+export type Pizza = {
+    id: string;
+    title: string;
+    price: number;
+    imageUrl: string;
+    sizes: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type SearchPizzaParams = {
+    sortBy: string;
+    order: string;
+    category: string;
+    search: string;
+    currentPage: string;
+  };
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125056.ts b/.history/redux/cards/types_20220518125056.ts
new file mode 100644
index 0000000..156469c
--- /dev/null
+++ b/.history/redux/cards/types_20220518125056.ts
@@ -0,0 +1,20 @@
+export type Stoke = {
+    id: string;
+    title: string;
+    price: number;
+    imageUrl: string;
+    sizes: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125118.ts b/.history/redux/cards/types_20220518125118.ts
new file mode 100644
index 0000000..1f4645e
--- /dev/null
+++ b/.history/redux/cards/types_20220518125118.ts
@@ -0,0 +1,20 @@
+export type Stoke = {
+    id: string;
+    title_one: string;
+    price: number;
+    imageUrl: string;
+    sizes: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125125.ts b/.history/redux/cards/types_20220518125125.ts
new file mode 100644
index 0000000..1ff36c1
--- /dev/null
+++ b/.history/redux/cards/types_20220518125125.ts
@@ -0,0 +1,20 @@
+export type Stoke = {
+    id: string;
+    title_one: string;
+    title_two: number;
+    imageUrl: string;
+    sizes: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125131.ts b/.history/redux/cards/types_20220518125131.ts
new file mode 100644
index 0000000..5b32f0c
--- /dev/null
+++ b/.history/redux/cards/types_20220518125131.ts
@@ -0,0 +1,20 @@
+export type Stoke = {
+    id: string;
+    title_one: string;
+    title_two: number;
+    sale: string;
+    sizes: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125136.ts b/.history/redux/cards/types_20220518125136.ts
new file mode 100644
index 0000000..744ff37
--- /dev/null
+++ b/.history/redux/cards/types_20220518125136.ts
@@ -0,0 +1,20 @@
+export type Stoke = {
+    id: string;
+    title_one: string;
+    title_two: number;
+    sale: string;
+    color: number[];
+    types: number[];
+    rating: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518125203.ts b/.history/redux/cards/types_20220518125203.ts
new file mode 100644
index 0000000..3041c9c
--- /dev/null
+++ b/.history/redux/cards/types_20220518125203.ts
@@ -0,0 +1,19 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518133114.ts b/.history/redux/cards/types_20220518133114.ts
new file mode 100644
index 0000000..f1d63ce
--- /dev/null
+++ b/.history/redux/cards/types_20220518133114.ts
@@ -0,0 +1,19 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading1',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518133117.ts b/.history/redux/cards/types_20220518133117.ts
new file mode 100644
index 0000000..3041c9c
--- /dev/null
+++ b/.history/redux/cards/types_20220518133117.ts
@@ -0,0 +1,19 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518133149.ts b/.history/redux/cards/types_20220518133149.ts
new file mode 100644
index 0000000..267fbae
--- /dev/null
+++ b/.history/redux/cards/types_20220518133149.ts
@@ -0,0 +1,20 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+    status: number;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518133154.ts b/.history/redux/cards/types_20220518133154.ts
new file mode 100644
index 0000000..a76d83d
--- /dev/null
+++ b/.history/redux/cards/types_20220518133154.ts
@@ -0,0 +1,21 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+    status: numbe;
+    
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cards/types_20220518133205.ts b/.history/redux/cards/types_20220518133205.ts
new file mode 100644
index 0000000..dcd38bd
--- /dev/null
+++ b/.history/redux/cards/types_20220518133205.ts
@@ -0,0 +1,21 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+    status: number;
+    adding_time: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/.history/redux/cart/selectors_20220516233536.ts b/.history/redux/cart/selectors_20220516233536.ts
new file mode 100644
index 0000000..7bfdec8
--- /dev/null
+++ b/.history/redux/cart/selectors_20220516233536.ts
@@ -0,0 +1,6 @@
+import { RootState } from '../store';
+
+export const selectCart = (state: RootState) => state.cart;
+
+export const selectCartItemById = (id: string) => (state: RootState) =>
+  state.cart.items.find((obj: { id: string; }) => obj.id === id);
diff --git a/.history/redux/cart/selectors_20220617192312.ts b/.history/redux/cart/selectors_20220617192312.ts
new file mode 100644
index 0000000..de89992
--- /dev/null
+++ b/.history/redux/cart/selectors_20220617192312.ts
@@ -0,0 +1,6 @@
+import { RootState } from '../store';
+
+//export const selectCart = (state: RootState) => state.cart;
+
+//export const selectCartItemById = (id: string) => (state: RootState) =>
+  //state.cart.items.find((obj: { id: string; }) => obj.id === id);
diff --git a/.history/redux/categories/index_20220529002654.ts b/.history/redux/categories/index_20220529002654.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/categories/index_20220529002654.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/categories/index_20220529002657.ts b/.history/redux/categories/index_20220529002657.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/categories/index_20220529002657.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/categories/index_20220529002741.ts b/.history/redux/categories/index_20220529002741.ts
new file mode 100644
index 0000000..7af8d6c
--- /dev/null
+++ b/.history/redux/categories/index_20220529002741.ts
@@ -0,0 +1,4 @@
+export * from './';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/categories/index_20220529002743.ts b/.history/redux/categories/index_20220529002743.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/categories/index_20220529002743.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/categories/index_20220529002753.ts b/.history/redux/categories/index_20220529002753.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/categories/index_20220529002753.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/categories/index_20220529002754.ts b/.history/redux/categories/index_20220529002754.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/categories/index_20220529002754.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/categories/slice_20220528225401.ts b/.history/redux/categories/slice_20220528225401.ts
new file mode 100644
index 0000000..b226dbb
--- /dev/null
+++ b/.history/redux/categories/slice_20220528225401.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories: [],
+    status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'Categories',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Categories[]>) {
+      state.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (state, action) => {
+      state.categories = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.categories = [];
+    });
+  },
+});
+
+export const { setItems } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/slice_20220528232015.ts b/.history/redux/categories/slice_20220528232015.ts
new file mode 100644
index 0000000..c33cdc1
--- /dev/null
+++ b/.history/redux/categories/slice_20220528232015.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories: [],
+    status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'Categories',
+  initialState,
+  reducers: {
+    setCategories(state, action: PayloadAction<Categories[]>) {
+      state.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (state, action) => {
+      state.categories = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.categories = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/slice_20220528232117.ts b/.history/redux/categories/slice_20220528232117.ts
new file mode 100644
index 0000000..7db83ea
--- /dev/null
+++ b/.history/redux/categories/slice_20220528232117.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories: [],
+    status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'Categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.status = Status.LOADING;
+      categories_status.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories = action.payload;
+      categories_status.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.status = Status.ERROR;
+      categories_status.categories = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/slice_20220528232349.ts b/.history/redux/categories/slice_20220528232349.ts
new file mode 100644
index 0000000..0803ccd
--- /dev/null
+++ b/.history/redux/categories/slice_20220528232349.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories: [],
+    status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.status = Status.LOADING;
+      categories_status.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories = action.payload;
+      categories_status.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.status = Status.ERROR;
+      categories_status.categories = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/slice_20220528233133.ts b/.history/redux/categories/slice_20220528233133.ts
new file mode 100644
index 0000000..4562026
--- /dev/null
+++ b/.history/redux/categories/slice_20220528233133.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories: [],
+    categories_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories = action.payload;
+      categories_status.categories_status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/slice_20220528233227.ts b/.history/redux/categories/slice_20220528233227.ts
new file mode 100644
index 0000000..6371b4a
--- /dev/null
+++ b/.history/redux/categories/slice_20220528233227.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories_items: [],
+    categories_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories = action.payload;
+      categories_status.categories_status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/slice_20220528233302.ts b/.history/redux/categories/slice_20220528233302.ts
new file mode 100644
index 0000000..a358d58
--- /dev/null
+++ b/.history/redux/categories/slice_20220528233302.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories_items: [],
+    categories_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/categories/stock_20220528225155.ts b/.history/redux/categories/stock_20220528225155.ts
new file mode 100644
index 0000000..565c148
--- /dev/null
+++ b/.history/redux/categories/stock_20220528225155.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Categories } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+     // console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/categories/stock_20220528232713.ts b/.history/redux/categories/stock_20220528232713.ts
new file mode 100644
index 0000000..b8ffebd
--- /dev/null
+++ b/.history/redux/categories/stock_20220528232713.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Categories } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/categories/types_20220528225113.ts b/.history/redux/categories/types_20220528225113.ts
new file mode 100644
index 0000000..0763c70
--- /dev/null
+++ b/.history/redux/categories/types_20220528225113.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    id: number;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories: Categories[];
+    status: Status;
+  }
diff --git a/.history/redux/categories/types_20220528231841.ts b/.history/redux/categories/types_20220528231841.ts
new file mode 100644
index 0000000..7f90c37
--- /dev/null
+++ b/.history/redux/categories/types_20220528231841.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories: Categories[];
+    status: Status;
+  }
diff --git a/.history/redux/categories/types_20220528233125.ts b/.history/redux/categories/types_20220528233125.ts
new file mode 100644
index 0000000..a0e1df9
--- /dev/null
+++ b/.history/redux/categories/types_20220528233125.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/categories/types_20220528233240.ts b/.history/redux/categories/types_20220528233240.ts
new file mode 100644
index 0000000..fb255bd
--- /dev/null
+++ b/.history/redux/categories/types_20220528233240.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/login/asyncActions_20220521121235.ts b/.history/redux/login/asyncActions_20220521121235.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/login/asyncActions_20220521121245.ts b/.history/redux/login/asyncActions_20220521121245.ts
new file mode 100644
index 0000000..39544bf
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521121245.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521121252.ts b/.history/redux/login/asyncActions_20220521121252.ts
new file mode 100644
index 0000000..62f8ed3
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521121252.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, SearchPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
+  'pizza/fetchPizzasStatus',
+  async (params) => {
+    const { sortBy, order, category, search, currentPage } = params;
+    console.log(params, 4444);
+    const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+      params: pickBy(
+        {
+          page: currentPage,
+          limit: 4,
+          category,
+          sortBy,
+          order,
+          search,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521121459.ts b/.history/redux/login/asyncActions_20220521121459.ts
new file mode 100644
index 0000000..d8b9fa4
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521121459.ts
@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    console.log(params, 4444);
+    const { data } = await axios.post<Token[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+      params: pickBy(
+        {
+          login: currentPage,
+          password: 4,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521121640.ts b/.history/redux/login/asyncActions_20220521121640.ts
new file mode 100644
index 0000000..fe440b4
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521121640.ts
@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    console.log(params, 4444);
+    const { data } = await axios.post<Token[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521121700.ts b/.history/redux/login/asyncActions_20220521121700.ts
new file mode 100644
index 0000000..3e092eb
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521121700.ts
@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzas = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    console.log(params, 4444);
+    const { data } = await axios.post<Token[]>(`/api/login`, {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521123447.ts b/.history/redux/login/asyncActions_20220521123447.ts
new file mode 100644
index 0000000..4537cc6
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521123447.ts
@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    console.log(params, 4444);
+    const { data } = await axios.post<Token[]>(`/api/login`, {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521124137.ts b/.history/redux/login/asyncActions_20220521124137.ts
new file mode 100644
index 0000000..43fcd4c
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521124137.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>(`/api/login`, {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521124208.ts b/.history/redux/login/asyncActions_20220521124208.ts
new file mode 100644
index 0000000..e27313f
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521124208.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521124947.ts b/.history/redux/login/asyncActions_20220521124947.ts
new file mode 100644
index 0000000..79140c8
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521124947.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    //console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521133002.ts b/.history/redux/login/asyncActions_20220521133002.ts
new file mode 100644
index 0000000..e27313f
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521133002.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521133017.ts b/.history/redux/login/asyncActions_20220521133017.ts
new file mode 100644
index 0000000..79140c8
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521133017.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    //console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521133306.ts b/.history/redux/login/asyncActions_20220521133306.ts
new file mode 100644
index 0000000..e27313f
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521133306.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220521133620.ts b/.history/redux/login/asyncActions_20220521133620.ts
new file mode 100644
index 0000000..79140c8
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220521133620.ts
@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    //console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125128.ts b/.history/redux/login/asyncActions_20220522125128.ts
new file mode 100644
index 0000000..48cd07e
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125128.ts
@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    localStorage.setItem('token', JSON.stringify(data));
+    //console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125353.ts b/.history/redux/login/asyncActions_20220522125353.ts
new file mode 100644
index 0000000..ce5d2ea
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125353.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    return value;
+  }
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    localStorage.setItem('token', JSON.stringify(data, replacer));
+    //console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125507.ts b/.history/redux/login/asyncActions_20220522125507.ts
new file mode 100644
index 0000000..6a721ac
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125507.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  }
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    //console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125620.ts b/.history/redux/login/asyncActions_20220522125620.ts
new file mode 100644
index 0000000..080a8d1
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125620.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  }
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125729.ts b/.history/redux/login/asyncActions_20220522125729.ts
new file mode 100644
index 0000000..aa49830
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125729.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value)}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125802.ts b/.history/redux/login/asyncActions_20220522125802.ts
new file mode 100644
index 0000000..78af700
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125802.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key !== 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value)}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522125836.ts b/.history/redux/login/asyncActions_20220522125836.ts
new file mode 100644
index 0000000..2734ee2
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522125836.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key == 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value)}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130110.ts b/.history/redux/login/asyncActions_20220522130110.ts
new file mode 100644
index 0000000..8a578ef
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130110.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key == 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value)}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data.token, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130252.ts b/.history/redux/login/asyncActions_20220522130252.ts
new file mode 100644
index 0000000..2734ee2
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130252.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key == 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value)}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130338.ts b/.history/redux/login/asyncActions_20220522130338.ts
new file mode 100644
index 0000000..1085f9a
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130338.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key == 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130350.ts b/.history/redux/login/asyncActions_20220522130350.ts
new file mode 100644
index 0000000..cb3009d
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130350.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data, replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130420.ts b/.history/redux/login/asyncActions_20220522130420.ts
new file mode 100644
index 0000000..4f77de8
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130420.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130452.ts b/.history/redux/login/asyncActions_20220522130452.ts
new file mode 100644
index 0000000..2ec855d
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130452.ts
@@ -0,0 +1,32 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522130924.ts b/.history/redux/login/asyncActions_20220522130924.ts
new file mode 100644
index 0000000..431b4bd
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522130924.ts
@@ -0,0 +1,34 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    type V1 = typeof data[token];
+    JSON.stringify(data[0], replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
+zzzzzzzzzzzzzzcccccccccccccccccccccccvvvcvb n 
\ No newline at end of file
diff --git a/.history/redux/login/asyncActions_20220522131004.ts b/.history/redux/login/asyncActions_20220522131004.ts
new file mode 100644
index 0000000..79560c1
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131004.ts
@@ -0,0 +1,33 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    type V1 = typeof data[Token];
+    JSON.stringify(data[0], replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131136.ts b/.history/redux/login/asyncActions_20220522131136.ts
new file mode 100644
index 0000000..b2a3eba
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131136.ts
@@ -0,0 +1,33 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    type V1 = typeof data[];
+    JSON.stringify(data[0], replacer);
+    console.log(data, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131330.ts b/.history/redux/login/asyncActions_20220522131330.ts
new file mode 100644
index 0000000..e39b596
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131330.ts
@@ -0,0 +1,32 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    console.log(data.values, 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131349.ts b/.history/redux/login/asyncActions_20220522131349.ts
new file mode 100644
index 0000000..92cbe74
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131349.ts
@@ -0,0 +1,32 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131428.ts b/.history/redux/login/asyncActions_20220522131428.ts
new file mode 100644
index 0000000..ae41bf6
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131428.ts
@@ -0,0 +1,32 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    console.log(Object.values(data[0]), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131501.ts b/.history/redux/login/asyncActions_20220522131501.ts
new file mode 100644
index 0000000..5f9c1c1
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131501.ts
@@ -0,0 +1,33 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131552.ts b/.history/redux/login/asyncActions_20220522131552.ts
new file mode 100644
index 0000000..5f9c1c1
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131552.ts
@@ -0,0 +1,33 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131758.ts b/.history/redux/login/asyncActions_20220522131758.ts
new file mode 100644
index 0000000..2ea1375
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131758.ts
@@ -0,0 +1,38 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  myString: string;
+  myNumber: number;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131903.ts b/.history/redux/login/asyncActions_20220522131903.ts
new file mode 100644
index 0000000..51b5441
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131903.ts
@@ -0,0 +1,41 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  myString: string;
+  myNumber: number;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.stringify(data);
+  console.log(obj.myString);
+  console.log(obj.myNumber);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131910.ts b/.history/redux/login/asyncActions_20220522131910.ts
new file mode 100644
index 0000000..01addea
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131910.ts
@@ -0,0 +1,43 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  myString: string;
+  myNumber: number;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse('{ "myString": "string", "myNumber": 4 }');
+console.log(obj.myString);
+console.log(obj.myNumber);
+  console.log(obj.myString);
+  console.log(obj.myNumber);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522131950.ts b/.history/redux/login/asyncActions_20220522131950.ts
new file mode 100644
index 0000000..50e7d95
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522131950.ts
@@ -0,0 +1,42 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  myString: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse('{ "myString": "string" }');
+console.log(obj.myString);
+console.log(obj.myNumber);
+  console.log(obj.myString);
+  console.log(obj.myNumber);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132023.ts b/.history/redux/login/asyncActions_20220522132023.ts
new file mode 100644
index 0000000..34eee11
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132023.ts
@@ -0,0 +1,40 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  token: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse('{ "myStrifng": "string" }');
+    console.log(obj.token);
+    console.log(obj.token);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132036.ts b/.history/redux/login/asyncActions_20220522132036.ts
new file mode 100644
index 0000000..e22964d
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132036.ts
@@ -0,0 +1,40 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  token: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse('{ "token": "string" }');
+    console.log(obj.token);
+    console.log(obj.token);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132110.ts b/.history/redux/login/asyncActions_20220522132110.ts
new file mode 100644
index 0000000..776d058
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132110.ts
@@ -0,0 +1,41 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse('{ "token": "string" }');
+    console.log(obj.token);
+    console.log(obj.error);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132138.ts b/.history/redux/login/asyncActions_20220522132138.ts
new file mode 100644
index 0000000..b8e1e39
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132138.ts
@@ -0,0 +1,41 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse(data);
+    console.log(obj.token);
+    console.log(obj.error);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132203.ts b/.history/redux/login/asyncActions_20220522132203.ts
new file mode 100644
index 0000000..9e02fd4
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132203.ts
@@ -0,0 +1,41 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+function replacer(key:string, value:string) {
+  console.log(typeof value);
+  if (key === 'token') {
+    console.log(value, 'json');
+    localStorage.setItem('token', JSON.stringify(value));
+  } else { console.log(value, 'json')}
+}
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    JSON.stringify(data[0], replacer);
+    let obj: MyObj = JSON.parse(JSON.stringify(data));
+    console.log(obj.token);
+    console.log(obj.error);
+    localStorage.setItem('token', JSON.stringify(Object.values(data)));
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132345.ts b/.history/redux/login/asyncActions_20220522132345.ts
new file mode 100644
index 0000000..25712cb
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132345.ts
@@ -0,0 +1,33 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+
+    let obj: MyObj = JSON.parse(JSON.stringify(data));
+    console.log(obj.token);
+    console.log(obj.error);
+    obj.token ? localStorage.setItem('token', JSON.stringify(obj.token)) : '';
+    console.log(Object.values(data), 4444);
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132653.ts b/.history/redux/login/asyncActions_20220522132653.ts
new file mode 100644
index 0000000..e291d6c
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132653.ts
@@ -0,0 +1,30 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+    let obj: MyObj = JSON.parse(JSON.stringify(data));
+    console.log(obj.error);
+    obj.token ? localStorage.setItem('token', JSON.stringify(obj.token)) : '';
+    return data;
+  },
+);
diff --git a/.history/redux/login/asyncActions_20220522132739.ts b/.history/redux/login/asyncActions_20220522132739.ts
new file mode 100644
index 0000000..bfff294
--- /dev/null
+++ b/.history/redux/login/asyncActions_20220522132739.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+
+    let obj: MyObj = JSON.parse(JSON.stringify(data));
+    obj.token ? localStorage.setItem('token', JSON.stringify(obj.token)) : '';
+
+    return data;
+  },
+);
diff --git a/.history/redux/login/selectors_20220520192512.ts b/.history/redux/login/selectors_20220520192512.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/login/selectors_20220520192526.ts b/.history/redux/login/selectors_20220520192526.ts
new file mode 100644
index 0000000..ca11796
--- /dev/null
+++ b/.history/redux/login/selectors_20220520192526.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectStokeData = (state: RootState) => state.stoke;
\ No newline at end of file
diff --git a/.history/redux/login/selectors_20220520192607.ts b/.history/redux/login/selectors_20220520192607.ts
new file mode 100644
index 0000000..c6972bf
--- /dev/null
+++ b/.history/redux/login/selectors_20220520192607.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectLoginData = (state: RootState) => state.login;
\ No newline at end of file
diff --git a/.history/redux/login/selectors_20220521113556.ts b/.history/redux/login/selectors_20220521113556.ts
new file mode 100644
index 0000000..8367793
--- /dev/null
+++ b/.history/redux/login/selectors_20220521113556.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectTokenData = (state: RootState) => state.token;
\ No newline at end of file
diff --git a/.history/redux/login/slice_20220520192637.ts b/.history/redux/login/slice_20220520192637.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/login/slice_20220520192724.ts b/.history/redux/login/slice_20220520192724.ts
new file mode 100644
index 0000000..d0a26e4
--- /dev/null
+++ b/.history/redux/login/slice_20220520192724.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Login, LoginSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const stokeSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Login[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = stokeSlice.actions;
+
+export default stokeSlice.reducer;
diff --git a/.history/redux/login/slice_20220520192754.ts b/.history/redux/login/slice_20220520192754.ts
new file mode 100644
index 0000000..03907e7
--- /dev/null
+++ b/.history/redux/login/slice_20220520192754.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { token, LoginSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const stokeSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Login[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = stokeSlice.actions;
+
+export default stokeSlice.reducer;
diff --git a/.history/redux/login/slice_20220521112408.ts b/.history/redux/login/slice_20220521112408.ts
new file mode 100644
index 0000000..0d0ab44
--- /dev/null
+++ b/.history/redux/login/slice_20220521112408.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Login[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521112531.ts b/.history/redux/login/slice_20220521112531.ts
new file mode 100644
index 0000000..24b0f86
--- /dev/null
+++ b/.history/redux/login/slice_20220521112531.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { token, LoginState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Login[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521112832.ts b/.history/redux/login/slice_20220521112832.ts
new file mode 100644
index 0000000..0d0ab44
--- /dev/null
+++ b/.history/redux/login/slice_20220521112832.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Login[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521112857.ts b/.history/redux/login/slice_20220521112857.ts
new file mode 100644
index 0000000..5a82463
--- /dev/null
+++ b/.history/redux/login/slice_20220521112857.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Login[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113037.ts b/.history/redux/login/slice_20220521113037.ts
new file mode 100644
index 0000000..037793e
--- /dev/null
+++ b/.history/redux/login/slice_20220521113037.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113059.ts b/.history/redux/login/slice_20220521113059.ts
new file mode 100644
index 0000000..0b4a487
--- /dev/null
+++ b/.history/redux/login/slice_20220521113059.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: string,
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113117.ts b/.history/redux/login/slice_20220521113117.ts
new file mode 100644
index 0000000..661bfe8
--- /dev/null
+++ b/.history/redux/login/slice_20220521113117.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113142.ts b/.history/redux/login/slice_20220521113142.ts
new file mode 100644
index 0000000..037793e
--- /dev/null
+++ b/.history/redux/login/slice_20220521113142.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113218.ts b/.history/redux/login/slice_20220521113218.ts
new file mode 100644
index 0000000..a6be9ed
--- /dev/null
+++ b/.history/redux/login/slice_20220521113218.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: Token.,
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113228.ts b/.history/redux/login/slice_20220521113228.ts
new file mode 100644
index 0000000..13924af
--- /dev/null
+++ b/.history/redux/login/slice_20220521113228.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: Token.token,
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113325.ts b/.history/redux/login/slice_20220521113325.ts
new file mode 100644
index 0000000..1f9c2fb
--- /dev/null
+++ b/.history/redux/login/slice_20220521113325.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: Token,
+  status: Status.LOADING, // loading | success | error
+};
+
+const loginSlice = createSlice({
+  name: 'login',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113715.ts b/.history/redux/login/slice_20220521113715.ts
new file mode 100644
index 0000000..9413c4d
--- /dev/null
+++ b/.history/redux/login/slice_20220521113715.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: Token,
+  status: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113724.ts b/.history/redux/login/slice_20220521113724.ts
new file mode 100644
index 0000000..be81323
--- /dev/null
+++ b/.history/redux/login/slice_20220521113724.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  items: []],
+  status: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113753.ts b/.history/redux/login/slice_20220521113753.ts
new file mode 100644
index 0000000..549271c
--- /dev/null
+++ b/.history/redux/login/slice_20220521113753.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113845.ts b/.history/redux/login/slice_20220521113845.ts
new file mode 100644
index 0000000..80a8070
--- /dev/null
+++ b/.history/redux/login/slice_20220521113845.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: Token,
+  status: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113913.ts b/.history/redux/login/slice_20220521113913.ts
new file mode 100644
index 0000000..549271c
--- /dev/null
+++ b/.history/redux/login/slice_20220521113913.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521113923.ts b/.history/redux/login/slice_20220521113923.ts
new file mode 100644
index 0000000..ada5f41
--- /dev/null
+++ b/.history/redux/login/slice_20220521113923.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.token = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521132601.ts b/.history/redux/login/slice_20220521132601.ts
new file mode 100644
index 0000000..4e28bc9
--- /dev/null
+++ b/.history/redux/login/slice_20220521132601.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.token = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521132625.ts b/.history/redux/login/slice_20220521132625.ts
new file mode 100644
index 0000000..059a63c
--- /dev/null
+++ b/.history/redux/login/slice_20220521132625.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './stock';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status_token = Status.LOADING;
+      state.token = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521132914.ts b/.history/redux/login/slice_20220521132914.ts
new file mode 100644
index 0000000..b108fbf
--- /dev/null
+++ b/.history/redux/login/slice_20220521132914.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchLogin } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLogin.pending, (state, action) => {
+      state.status_token = Status.LOADING;
+      state.token = [];
+    });
+
+    builder.addCase(fetchLogin.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchLogin.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521132926.ts b/.history/redux/login/slice_20220521132926.ts
new file mode 100644
index 0000000..8db9aa6
--- /dev/null
+++ b/.history/redux/login/slice_20220521132926.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.status_token = Status.LOADING;
+      state.token = [];
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133104.ts b/.history/redux/login/slice_20220521133104.ts
new file mode 100644
index 0000000..3770146
--- /dev/null
+++ b/.history/redux/login/slice_20220521133104.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133339.ts b/.history/redux/login/slice_20220521133339.ts
new file mode 100644
index 0000000..b37cb4d
--- /dev/null
+++ b/.history/redux/login/slice_20220521133339.ts
@@ -0,0 +1,39 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+      console.log(state);
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133351.ts b/.history/redux/login/slice_20220521133351.ts
new file mode 100644
index 0000000..82e1f06
--- /dev/null
+++ b/.history/redux/login/slice_20220521133351.ts
@@ -0,0 +1,39 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+      console.log(state.status_token);
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133406.ts b/.history/redux/login/slice_20220521133406.ts
new file mode 100644
index 0000000..c7e02cf
--- /dev/null
+++ b/.history/redux/login/slice_20220521133406.ts
@@ -0,0 +1,39 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+      console.log(state.token);
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133443.ts b/.history/redux/login/slice_20220521133443.ts
new file mode 100644
index 0000000..3770146
--- /dev/null
+++ b/.history/redux/login/slice_20220521133443.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133606.ts b/.history/redux/login/slice_20220521133606.ts
new file mode 100644
index 0000000..3770146
--- /dev/null
+++ b/.history/redux/login/slice_20220521133606.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/slice_20220521133609.ts b/.history/redux/login/slice_20220521133609.ts
new file mode 100644
index 0000000..3770146
--- /dev/null
+++ b/.history/redux/login/slice_20220521133609.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/.history/redux/login/stock_20220520192816.ts b/.history/redux/login/stock_20220520192816.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/login/stock_20220520192858.ts b/.history/redux/login/stock_20220520192858.ts
new file mode 100644
index 0000000..6c538a1
--- /dev/null
+++ b/.history/redux/login/stock_20220520192858.ts
@@ -0,0 +1,11 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Login } from './types';
+
+export const fetchLogin = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Login[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/login/stock_20220520193046.ts b/.history/redux/login/stock_20220520193046.ts
new file mode 100644
index 0000000..751c8f6
--- /dev/null
+++ b/.history/redux/login/stock_20220520193046.ts
@@ -0,0 +1,11 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Login } from './types';
+
+export const fetchLogin = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Login[]>(`/api/login`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/login/stock_20220521112955.ts b/.history/redux/login/stock_20220521112955.ts
new file mode 100644
index 0000000..5936d0a
--- /dev/null
+++ b/.history/redux/login/stock_20220521112955.ts
@@ -0,0 +1,11 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token } from './types';
+
+export const fetchLogin = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Token[]>(`/api/login`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/login/types_20220520192205.ts b/.history/redux/login/types_20220520192205.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/login/types_20220520192425.ts b/.history/redux/login/types_20220520192425.ts
new file mode 100644
index 0000000..fa00a39
--- /dev/null
+++ b/.history/redux/login/types_20220520192425.ts
@@ -0,0 +1,3 @@
+  export interface LoginState {
+    token: string;
+  }
diff --git a/.history/redux/login/types_20220521112550.ts b/.history/redux/login/types_20220521112550.ts
new file mode 100644
index 0000000..60e4355
--- /dev/null
+++ b/.history/redux/login/types_20220521112550.ts
@@ -0,0 +1,9 @@
+  export interface LoginState {
+    token: string;
+  }
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521112645.ts b/.history/redux/login/types_20220521112645.ts
new file mode 100644
index 0000000..57ad4c7
--- /dev/null
+++ b/.history/redux/login/types_20220521112645.ts
@@ -0,0 +1,10 @@
+export interface LoginState {
+    token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
diff --git a/.history/redux/login/types_20220521112754.ts b/.history/redux/login/types_20220521112754.ts
new file mode 100644
index 0000000..3c35d18
--- /dev/null
+++ b/.history/redux/login/types_20220521112754.ts
@@ -0,0 +1,16 @@
+export interface LoginState {
+    token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+
+
+export interface LoginSliceState {
+  items: Stoke[];
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521112824.ts b/.history/redux/login/types_20220521112824.ts
new file mode 100644
index 0000000..d7b622c
--- /dev/null
+++ b/.history/redux/login/types_20220521112824.ts
@@ -0,0 +1,16 @@
+export interface TokenState {
+    token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+
+
+export interface LoginSliceState {
+  items: TokenState;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521112842.ts b/.history/redux/login/types_20220521112842.ts
new file mode 100644
index 0000000..70cfcbc
--- /dev/null
+++ b/.history/redux/login/types_20220521112842.ts
@@ -0,0 +1,16 @@
+export interface Token {
+    token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+
+
+export interface LoginSliceState {
+  items: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521112915.ts b/.history/redux/login/types_20220521112915.ts
new file mode 100644
index 0000000..7836b08
--- /dev/null
+++ b/.history/redux/login/types_20220521112915.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  items: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113048.ts b/.history/redux/login/types_20220521113048.ts
new file mode 100644
index 0000000..03dcb2d
--- /dev/null
+++ b/.history/redux/login/types_20220521113048.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  token: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113128.ts b/.history/redux/login/types_20220521113128.ts
new file mode 100644
index 0000000..7836b08
--- /dev/null
+++ b/.history/redux/login/types_20220521113128.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  items: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113134.ts b/.history/redux/login/types_20220521113134.ts
new file mode 100644
index 0000000..7836b08
--- /dev/null
+++ b/.history/redux/login/types_20220521113134.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  items: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113430.ts b/.history/redux/login/types_20220521113430.ts
new file mode 100644
index 0000000..7836b08
--- /dev/null
+++ b/.history/redux/login/types_20220521113430.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  items: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113500.ts b/.history/redux/login/types_20220521113500.ts
new file mode 100644
index 0000000..d11c7df
--- /dev/null
+++ b/.history/redux/login/types_20220521113500.ts
@@ -0,0 +1,10 @@
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  token: string;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113519.ts b/.history/redux/login/types_20220521113519.ts
new file mode 100644
index 0000000..03dcb2d
--- /dev/null
+++ b/.history/redux/login/types_20220521113519.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  token: Token;
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521113857.ts b/.history/redux/login/types_20220521113857.ts
new file mode 100644
index 0000000..31853e7
--- /dev/null
+++ b/.history/redux/login/types_20220521113857.ts
@@ -0,0 +1,14 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  token: Token[];
+  status: Status;
+}
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521121341.ts b/.history/redux/login/types_20220521121341.ts
new file mode 100644
index 0000000..e0075fe
--- /dev/null
+++ b/.history/redux/login/types_20220521121341.ts
@@ -0,0 +1,19 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  token: Token[];
+  status: Status;
+}
+
+export type LoginParams = {
+  login: string;
+  password: string;
+};
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521132615.ts b/.history/redux/login/types_20220521132615.ts
new file mode 100644
index 0000000..f3cf32d
--- /dev/null
+++ b/.history/redux/login/types_20220521132615.ts
@@ -0,0 +1,19 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading',
+  SUCCESS = 'completed',
+  ERROR = 'error',
+}
+
+export interface LoginSliceState {
+  token: Token[];
+  status_token: Status;
+}
+
+export type LoginParams = {
+  login: string;
+  password: string;
+};
\ No newline at end of file
diff --git a/.history/redux/login/types_20220521133228.ts b/.history/redux/login/types_20220521133228.ts
new file mode 100644
index 0000000..bef32a6
--- /dev/null
+++ b/.history/redux/login/types_20220521133228.ts
@@ -0,0 +1,19 @@
+export interface Token {
+  token: string;
+}
+
+export enum Status {
+  LOADING = 'loading_token',
+  SUCCESS = 'completed_token',
+  ERROR = 'error_token',
+}
+
+export interface LoginSliceState {
+  token: Token[];
+  status_token: Status;
+}
+
+export type LoginParams = {
+  login: string;
+  password: string;
+};
\ No newline at end of file
diff --git a/.history/redux/login/types_20220522130244.ts b/.history/redux/login/types_20220522130244.ts
new file mode 100644
index 0000000..207d0ca
--- /dev/null
+++ b/.history/redux/login/types_20220522130244.ts
@@ -0,0 +1,20 @@
+export interface Token {
+  token: string;
+  error: string;
+}
+
+export enum Status {
+  LOADING = 'loading_token',
+  SUCCESS = 'completed_token',
+  ERROR = 'error_token',
+}
+
+export interface LoginSliceState {
+  token: Token[];
+  status_token: Status;
+}
+
+export type LoginParams = {
+  login: string;
+  password: string;
+};
\ No newline at end of file
diff --git a/.history/redux/pizza/selectors_20220529002858.ts b/.history/redux/pizza/selectors_20220529002858.ts
new file mode 100644
index 0000000..dfd5c73
--- /dev/null
+++ b/.history/redux/pizza/selectors_20220529002858.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectCategoriesData = (state: RootState) => state.categories;
diff --git a/.history/redux/pizza/selectors_20220529002944.ts b/.history/redux/pizza/selectors_20220529002944.ts
new file mode 100644
index 0000000..c5334d3
--- /dev/null
+++ b/.history/redux/pizza/selectors_20220529002944.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectPizzaData = (state: RootState) => state.categories;
diff --git a/.history/redux/pizza/selectors_20220529002948.ts b/.history/redux/pizza/selectors_20220529002948.ts
new file mode 100644
index 0000000..684912a
--- /dev/null
+++ b/.history/redux/pizza/selectors_20220529002948.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectPizzaData = (state: RootState) => state.pizza;
diff --git a/.history/redux/pizza/selectors_20220529002949.ts b/.history/redux/pizza/selectors_20220529002949.ts
new file mode 100644
index 0000000..684912a
--- /dev/null
+++ b/.history/redux/pizza/selectors_20220529002949.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectPizzaData = (state: RootState) => state.pizza;
diff --git a/.history/redux/pizza/slice_20220529002858.ts b/.history/redux/pizza/slice_20220529002858.ts
new file mode 100644
index 0000000..a358d58
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529002858.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories_items: [],
+    categories_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003022.ts b/.history/redux/pizza/slice_20220529003022.ts
new file mode 100644
index 0000000..6b6aeef
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003022.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    pizza_items: [],
+    categories_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003029.ts b/.history/redux/pizza/slice_20220529003029.ts
new file mode 100644
index 0000000..9a31ae1
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003029.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003032.ts b/.history/redux/pizza/slice_20220529003032.ts
new file mode 100644
index 0000000..cb26ad6
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003032.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003034.ts b/.history/redux/pizza/slice_20220529003034.ts
new file mode 100644
index 0000000..5018ee1
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003034.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: pizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003036.ts b/.history/redux/pizza/slice_20220529003036.ts
new file mode 100644
index 0000000..3beb1af
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003036.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003043.ts b/.history/redux/pizza/slice_20220529003043.ts
new file mode 100644
index 0000000..f079222
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003043.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setCategories(pizza_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003045.ts b/.history/redux/pizza/slice_20220529003045.ts
new file mode 100644
index 0000000..d0a6dfe
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003045.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setpizza(pizza_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003047.ts b/.history/redux/pizza/slice_20220529003047.ts
new file mode 100644
index 0000000..305f4f6
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003047.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003050.ts b/.history/redux/pizza/slice_20220529003050.ts
new file mode 100644
index 0000000..979d541
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003050.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Categories[]>) {
+      pizza_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003051.ts b/.history/redux/pizza/slice_20220529003051.ts
new file mode 100644
index 0000000..2b9dea0
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003051.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<pizza[]>) {
+      pizza_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003053.ts b/.history/redux/pizza/slice_20220529003053.ts
new file mode 100644
index 0000000..d9f10c9
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003053.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003100.ts b/.history/redux/pizza/slice_20220529003100.ts
new file mode 100644
index 0000000..3dc9c69
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003100.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      pizza_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003102.ts b/.history/redux/pizza/slice_20220529003102.ts
new file mode 100644
index 0000000..1e91fa5
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003102.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      pizza_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003105.ts b/.history/redux/pizza/slice_20220529003105.ts
new file mode 100644
index 0000000..2e3a169
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003105.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      pizza_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003110.ts b/.history/redux/pizza/slice_20220529003110.ts
new file mode 100644
index 0000000..5e8769d
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003110.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      pizza_status.categories_status = Status.LOADING;
+      pizza_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003112.ts b/.history/redux/pizza/slice_20220529003112.ts
new file mode 100644
index 0000000..14508cb
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003112.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.categories_status = Status.LOADING;
+      pizza_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003115.ts b/.history/redux/pizza/slice_20220529003115.ts
new file mode 100644
index 0000000..a1e2a84
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003115.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.categories_status = Status.LOADING;
+      pizza_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003118.ts b/.history/redux/pizza/slice_20220529003118.ts
new file mode 100644
index 0000000..679cbbe
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003118.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003120.ts b/.history/redux/pizza/slice_20220529003120.ts
new file mode 100644
index 0000000..1e0bc7d
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003120.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003124.ts b/.history/redux/pizza/slice_20220529003124.ts
new file mode 100644
index 0000000..8b3c9ba
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003124.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003126.ts b/.history/redux/pizza/slice_20220529003126.ts
new file mode 100644
index 0000000..a25eb54
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003126.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003130.ts b/.history/redux/pizza/slice_20220529003130.ts
new file mode 100644
index 0000000..f5d800a
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003130.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003132.ts b/.history/redux/pizza/slice_20220529003132.ts
new file mode 100644
index 0000000..1b603a2
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003132.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003136.ts b/.history/redux/pizza/slice_20220529003136.ts
new file mode 100644
index 0000000..13ba2f3
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003136.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003140.ts b/.history/redux/pizza/slice_20220529003140.ts
new file mode 100644
index 0000000..17a8ef9
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003140.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = pizzaSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003143.ts b/.history/redux/pizza/slice_20220529003143.ts
new file mode 100644
index 0000000..96040a1
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003143.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.categories_items = [];
+    });
+  },
+});
+
+export const { setpizza } = pizzaSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003144.ts b/.history/redux/pizza/slice_20220529003144.ts
new file mode 100644
index 0000000..5fbe136
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003144.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.categories_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003151.ts b/.history/redux/pizza/slice_20220529003151.ts
new file mode 100644
index 0000000..70d73e5
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003151.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.categories_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003154.ts b/.history/redux/pizza/slice_20220529003154.ts
new file mode 100644
index 0000000..e54daf5
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003154.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.categories_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003157.ts b/.history/redux/pizza/slice_20220529003157.ts
new file mode 100644
index 0000000..8a9b837
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003157.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003159.ts b/.history/redux/pizza/slice_20220529003159.ts
new file mode 100644
index 0000000..d4a51e1
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003159.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchpizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003200.ts b/.history/redux/pizza/slice_20220529003200.ts
new file mode 100644
index 0000000..6b8ba28
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003200.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003204.ts b/.history/redux/pizza/slice_20220529003204.ts
new file mode 100644
index 0000000..2318bf5
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003204.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchpizza.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003206.ts b/.history/redux/pizza/slice_20220529003206.ts
new file mode 100644
index 0000000..d462cae
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003206.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.categories_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003209.ts b/.history/redux/pizza/slice_20220529003209.ts
new file mode 100644
index 0000000..f76a0fe
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003209.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003212.ts b/.history/redux/pizza/slice_20220529003212.ts
new file mode 100644
index 0000000..522849c
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003212.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003215.ts b/.history/redux/pizza/slice_20220529003215.ts
new file mode 100644
index 0000000..c34a305
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003215.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchpizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003216.ts b/.history/redux/pizza/slice_20220529003216.ts
new file mode 100644
index 0000000..6d901d3
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003216.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003331.ts b/.history/redux/pizza/slice_20220529003331.ts
new file mode 100644
index 0000000..fef09e4
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003331.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchpizza } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003333.ts b/.history/redux/pizza/slice_20220529003333.ts
new file mode 100644
index 0000000..1c1a8f8
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003333.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003335.ts b/.history/redux/pizza/slice_20220529003335.ts
new file mode 100644
index 0000000..19509b7
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003335.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { pizza, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003337.ts b/.history/redux/pizza/slice_20220529003337.ts
new file mode 100644
index 0000000..3755a28
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003337.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Pizza, CategoriesSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003340.ts b/.history/redux/pizza/slice_20220529003340.ts
new file mode 100644
index 0000000..d0d278a
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003340.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Pizza, pizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003342.ts b/.history/redux/pizza/slice_20220529003342.ts
new file mode 100644
index 0000000..7a7996d
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003342.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Pizza, PizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzas.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003350.ts b/.history/redux/pizza/slice_20220529003350.ts
new file mode 100644
index 0000000..b49901a
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003350.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Pizza, PizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizza.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/slice_20220529003353.ts b/.history/redux/pizza/slice_20220529003353.ts
new file mode 100644
index 0000000..b49901a
--- /dev/null
+++ b/.history/redux/pizza/slice_20220529003353.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Pizza, PizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizza.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/.history/redux/pizza/stock_20220529002858.ts b/.history/redux/pizza/stock_20220529002858.ts
new file mode 100644
index 0000000..b8ffebd
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529002858.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Categories } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003255.ts b/.history/redux/pizza/stock_20220529003255.ts
new file mode 100644
index 0000000..bbdf28d
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003255.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { pizza } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003257.ts b/.history/redux/pizza/stock_20220529003257.ts
new file mode 100644
index 0000000..3431368
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003257.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003259.ts b/.history/redux/pizza/stock_20220529003259.ts
new file mode 100644
index 0000000..7de0d7c
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003259.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003301.ts b/.history/redux/pizza/stock_20220529003301.ts
new file mode 100644
index 0000000..8c7ee94
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003301.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003304.ts b/.history/redux/pizza/stock_20220529003304.ts
new file mode 100644
index 0000000..4933f0e
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003304.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchpizza = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003306.ts b/.history/redux/pizza/stock_20220529003306.ts
new file mode 100644
index 0000000..39b1d1d
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003306.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003310.ts b/.history/redux/pizza/stock_20220529003310.ts
new file mode 100644
index 0000000..bd83f04
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003310.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'Categories/fetchpizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003312.ts b/.history/redux/pizza/stock_20220529003312.ts
new file mode 100644
index 0000000..3e81a65
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003312.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'Categories/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003315.ts b/.history/redux/pizza/stock_20220529003315.ts
new file mode 100644
index 0000000..45590d4
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003315.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003320.ts b/.history/redux/pizza/stock_20220529003320.ts
new file mode 100644
index 0000000..dc68d2c
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003320.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingpizza`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003322.ts b/.history/redux/pizza/stock_20220529003322.ts
new file mode 100644
index 0000000..6a0fc9b
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003322.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingPizza`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529003323.ts b/.history/redux/pizza/stock_20220529003323.ts
new file mode 100644
index 0000000..6a0fc9b
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529003323.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingPizza`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/stock_20220529141149.ts b/.history/redux/pizza/stock_20220529141149.ts
new file mode 100644
index 0000000..9d0d14e
--- /dev/null
+++ b/.history/redux/pizza/stock_20220529141149.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingPizzaCard`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizza/types_20220529002858.ts b/.history/redux/pizza/types_20220529002858.ts
new file mode 100644
index 0000000..fb255bd
--- /dev/null
+++ b/.history/redux/pizza/types_20220529002858.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003226.ts b/.history/redux/pizza/types_20220529003226.ts
new file mode 100644
index 0000000..54aa8a5
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003226.ts
@@ -0,0 +1,15 @@
+export type pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003228.ts b/.history/redux/pizza/types_20220529003228.ts
new file mode 100644
index 0000000..3686f87
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003228.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003237.ts b/.history/redux/pizza/types_20220529003237.ts
new file mode 100644
index 0000000..50c9e1e
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003237.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface pizzaSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003239.ts b/.history/redux/pizza/types_20220529003239.ts
new file mode 100644
index 0000000..4ea43e1
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003239.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003243.ts b/.history/redux/pizza/types_20220529003243.ts
new file mode 100644
index 0000000..f379424
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003243.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003245.ts b/.history/redux/pizza/types_20220529003245.ts
new file mode 100644
index 0000000..b66254c
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003245.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Categories[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003247.ts b/.history/redux/pizza/types_20220529003247.ts
new file mode 100644
index 0000000..9e59f17
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003247.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Categopizzaries[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003248.ts b/.history/redux/pizza/types_20220529003248.ts
new file mode 100644
index 0000000..d019de1
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003248.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529003250.ts b/.history/redux/pizza/types_20220529003250.ts
new file mode 100644
index 0000000..fca00b7
--- /dev/null
+++ b/.history/redux/pizza/types_20220529003250.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004156.ts b/.history/redux/pizza/types_20220529004156.ts
new file mode 100644
index 0000000..8ad5953
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004156.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    id: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004159.ts b/.history/redux/pizza/types_20220529004159.ts
new file mode 100644
index 0000000..02e0149
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004159.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    id: number;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004201.ts b/.history/redux/pizza/types_20220529004201.ts
new file mode 100644
index 0000000..0aa5dc9
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004201.ts
@@ -0,0 +1,15 @@
+export type Pizza = {
+    id: number;
+    title: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004204.ts b/.history/redux/pizza/types_20220529004204.ts
new file mode 100644
index 0000000..95eaab1
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004204.ts
@@ -0,0 +1,16 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    title: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004211.ts b/.history/redux/pizza/types_20220529004211.ts
new file mode 100644
index 0000000..ffdb2c1
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004211.ts
@@ -0,0 +1,16 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004305.ts b/.history/redux/pizza/types_20220529004305.ts
new file mode 100644
index 0000000..45786c5
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004305.ts
@@ -0,0 +1,17 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price:
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004307.ts b/.history/redux/pizza/types_20220529004307.ts
new file mode 100644
index 0000000..5cb0a72
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004307.ts
@@ -0,0 +1,17 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price:nu
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004309.ts b/.history/redux/pizza/types_20220529004309.ts
new file mode 100644
index 0000000..db63dce
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004309.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price:number;
+    
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004343.ts b/.history/redux/pizza/types_20220529004343.ts
new file mode 100644
index 0000000..4195d62
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004343.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price:number;
+    imageUrl: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004346.ts b/.history/redux/pizza/types_20220529004346.ts
new file mode 100644
index 0000000..4195d62
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004346.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price:number;
+    imageUrl: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004922.ts b/.history/redux/pizza/types_20220529004922.ts
new file mode 100644
index 0000000..4649e1e
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004922.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    heft_trad:number;
+    imageUrl: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220529004942.ts b/.history/redux/pizza/types_20220529004942.ts
new file mode 100644
index 0000000..d3b4bb8
--- /dev/null
+++ b/.history/redux/pizza/types_20220529004942.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    heft_trad:number;
+    img_trad: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220617161309.ts b/.history/redux/pizza/types_20220617161309.ts
new file mode 100644
index 0000000..fc8fdec
--- /dev/null
+++ b/.history/redux/pizza/types_20220617161309.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    heft: number[];
+    img: string[];
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizza/types_20220617161326.ts b/.history/redux/pizza/types_20220617161326.ts
new file mode 100644
index 0000000..0c5e8ec
--- /dev/null
+++ b/.history/redux/pizza/types_20220617161326.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price: number[];
+    img: string[];
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/.history/redux/pizzaToCart/index_20220615154726.ts b/.history/redux/pizzaToCart/index_20220615154726.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/pizzaToCart/index_20220615155718.ts b/.history/redux/pizzaToCart/index_20220615155718.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/pizzaToCart/index_20220615155718.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/selectors_20220615154737.ts b/.history/redux/pizzaToCart/selectors_20220615154737.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/pizzaToCart/selectors_20220615154922.ts b/.history/redux/pizzaToCart/selectors_20220615154922.ts
new file mode 100644
index 0000000..143c8a2
--- /dev/null
+++ b/.history/redux/pizzaToCart/selectors_20220615154922.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectPizzaToCartData = (state: RootState) => state.pizzaToCard;
diff --git a/.history/redux/pizzaToCart/slice_20220615154928.ts b/.history/redux/pizzaToCart/slice_20220615154928.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/pizzaToCart/slice_20220615155630.ts b/.history/redux/pizzaToCart/slice_20220615155630.ts
new file mode 100644
index 0000000..64ddaec
--- /dev/null
+++ b/.history/redux/pizzaToCart/slice_20220615155630.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizzaToCard } from './stock';
+import { PizzaToCard, PizzaToCardSliceState, Status } from './types';
+
+const initialState: PizzaToCardSliceState = {
+    pizzaToCard_items: [],
+    pizzaToCard_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaToCardSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizzaToCard(pizzaToCard_status, action: PayloadAction<PizzaToCard[]>) {
+      pizzaToCard_status.pizzaToCard_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizzaToCard.pending, (pizzaToCard_status, action) => {
+      pizzaToCard_status.pizzaToCard_status = Status.LOADING;
+      pizzaToCard_status.pizzaToCard_items = [];
+    });
+
+    builder.addCase(fetchPizzaToCard.fulfilled, (pizzaToCard_status, action) => {
+      pizzaToCard_status.pizzaToCard_status = Status.SUCCESS;
+      pizzaToCard_status.pizzaToCard_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzaToCard.rejected, (pizzaToCard_status, action) => {
+      pizzaToCard_status.pizzaToCard_status = Status.ERROR;
+      pizzaToCard_status.pizzaToCard_items = [];
+    });
+  },
+});
+
+export const { setPizzaToCard } = pizzaToCardSlice.actions;
+
+export default pizzaToCardSlice.reducer;
diff --git a/.history/redux/pizzaToCart/stock_20220615155004.ts b/.history/redux/pizzaToCart/stock_20220615155004.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/pizzaToCart/stock_20220615155214.ts b/.history/redux/pizzaToCart/stock_20220615155214.ts
new file mode 100644
index 0000000..ba9ace5
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615155214.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615161640.ts b/.history/redux/pizzaToCart/stock_20220615161640.ts
new file mode 100644
index 0000000..9621dbe
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615161640.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizza/fetchPizzaStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id)
+        console.log(data);
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615161735.ts b/.history/redux/pizzaToCart/stock_20220615161735.ts
new file mode 100644
index 0000000..adbe693
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615161735.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizza/fetchPizzaStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id)
+        console.log(data, 'stock');
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615161844.ts b/.history/redux/pizzaToCart/stock_20220615161844.ts
new file mode 100644
index 0000000..2f8e1cd
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615161844.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id)
+        console.log(data, 'stock');
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615161957.ts b/.history/redux/pizzaToCart/stock_20220615161957.ts
new file mode 100644
index 0000000..1ddfe23
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615161957.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id)
+        console.log(id, 'stock');
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615162004.ts b/.history/redux/pizzaToCart/stock_20220615162004.ts
new file mode 100644
index 0000000..c5f299e
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615162004.ts
@@ -0,0 +1,14 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        console.log(id, 'stock');
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id)
+        
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615162016.ts b/.history/redux/pizzaToCart/stock_20220615162016.ts
new file mode 100644
index 0000000..1061052
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615162016.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        console.log(id, 'stock');
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id);
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220615162050.ts b/.history/redux/pizzaToCart/stock_20220615162050.ts
new file mode 100644
index 0000000..620caa0
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220615162050.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id);
+        console.log(data, 'stock');
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/stock_20220617162816.ts b/.history/redux/pizzaToCart/stock_20220617162816.ts
new file mode 100644
index 0000000..91a01be
--- /dev/null
+++ b/.history/redux/pizzaToCart/stock_20220617162816.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id);
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/pizzaToCart/types_20220615155011.ts b/.history/redux/pizzaToCart/types_20220615155011.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/pizzaToCart/types_20220615155138.ts b/.history/redux/pizzaToCart/types_20220615155138.ts
new file mode 100644
index 0000000..0920409
--- /dev/null
+++ b/.history/redux/pizzaToCart/types_20220615155138.ts
@@ -0,0 +1,18 @@
+export type PizzaToCard = {
+    id: number;
+    title: string;
+    description: string;
+    heft_trad:number;
+    img_trad: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaToCardSliceState {
+    pizzaToCard_items: PizzaToCard[];
+    pizzaToCard_status: Status;
+  }
diff --git a/.history/redux/pizzaToCart/types_20220615161032.ts b/.history/redux/pizzaToCart/types_20220615161032.ts
new file mode 100644
index 0000000..0cae280
--- /dev/null
+++ b/.history/redux/pizzaToCart/types_20220615161032.ts
@@ -0,0 +1,22 @@
+export type PizzaToCard = {
+    id: number;
+    title: string;
+    description: string;
+    heft_trad:number;
+    img_trad: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type GetPizzaParams = {
+    id: number;
+  };
+
+  export interface PizzaToCardSliceState {
+    pizzaToCard_items: PizzaToCard[];
+    pizzaToCard_status: Status;
+  }
diff --git a/.history/redux/pizzaToCart/types_20220615164200.ts b/.history/redux/pizzaToCart/types_20220615164200.ts
new file mode 100644
index 0000000..1742cf5
--- /dev/null
+++ b/.history/redux/pizzaToCart/types_20220615164200.ts
@@ -0,0 +1,27 @@
+export type PizzaToCard = {
+    id: number;
+    title: string;
+    description: string;
+    heft_trad:number;
+    img_trad: string;
+    img_thin: string;
+    name: string;
+    price: number;
+    size: string;
+    feature: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type GetPizzaParams = {
+    id: number;
+  };
+
+  export interface PizzaToCardSliceState {
+    pizzaToCard_items: PizzaToCard[];
+    pizzaToCard_status: Status;
+  }
diff --git a/.history/redux/pizzaToCart/types_20220616123747.ts b/.history/redux/pizzaToCart/types_20220616123747.ts
new file mode 100644
index 0000000..33a1669
--- /dev/null
+++ b/.history/redux/pizzaToCart/types_20220616123747.ts
@@ -0,0 +1,26 @@
+export type PizzaToCard = {
+    id: number;
+    title: string;
+    description: string;
+    heft: string[];
+    img: string[];
+    name: string;
+    price: number;
+    size: string;
+    feature: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type GetPizzaParams = {
+    id: number;
+  };
+
+  export interface PizzaToCardSliceState {
+    pizzaToCard_items: PizzaToCard[];
+    pizzaToCard_status: Status;
+  }
diff --git a/.history/redux/pizzaToCart/types_20220616123850.ts b/.history/redux/pizzaToCart/types_20220616123850.ts
new file mode 100644
index 0000000..0776f78
--- /dev/null
+++ b/.history/redux/pizzaToCart/types_20220616123850.ts
@@ -0,0 +1,24 @@
+export type PizzaToCard = {
+    id: number;
+    title: string;
+    heft: string[];
+    description: string;
+    img: string[];
+    price: string[];
+    size: string[];
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type GetPizzaParams = {
+    id: number;
+  };
+
+  export interface PizzaToCardSliceState {
+    pizzaToCard_items: PizzaToCard[];
+    pizzaToCard_status: Status;
+  }
diff --git a/.history/redux/stoke/index_20220529002617.ts b/.history/redux/stoke/index_20220529002617.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/redux/stoke/index_20220529002622.ts b/.history/redux/stoke/index_20220529002622.ts
new file mode 100644
index 0000000..42151f0
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002622.ts
@@ -0,0 +1 @@
+export 
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002625.ts b/.history/redux/stoke/index_20220529002625.ts
new file mode 100644
index 0000000..678f628
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002625.ts
@@ -0,0 +1 @@
+export * from 
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002627.ts b/.history/redux/stoke/index_20220529002627.ts
new file mode 100644
index 0000000..45184d9
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002627.ts
@@ -0,0 +1 @@
+export * from './'
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002631.ts b/.history/redux/stoke/index_20220529002631.ts
new file mode 100644
index 0000000..1eda10d
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002631.ts
@@ -0,0 +1 @@
+export * from './selectors'
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002632.ts b/.history/redux/stoke/index_20220529002632.ts
new file mode 100644
index 0000000..9aa8f6c
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002632.ts
@@ -0,0 +1 @@
+export * from './selectors';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002636.ts b/.history/redux/stoke/index_20220529002636.ts
new file mode 100644
index 0000000..8add8bf
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002636.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './selectors';
+export * from './selectors';
+export * from './selectors';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002639.ts b/.history/redux/stoke/index_20220529002639.ts
new file mode 100644
index 0000000..1dd8c30
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002639.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './selectors';
+export * from './selectors';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002641.ts b/.history/redux/stoke/index_20220529002641.ts
new file mode 100644
index 0000000..41208ae
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002641.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from '../';
+export * from './selectors';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002644.ts b/.history/redux/stoke/index_20220529002644.ts
new file mode 100644
index 0000000..d40e861
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002644.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './selectors';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002648.ts b/.history/redux/stoke/index_20220529002648.ts
new file mode 100644
index 0000000..8947134
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002648.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002649.ts b/.history/redux/stoke/index_20220529002649.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002649.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/stoke/index_20220529002650.ts b/.history/redux/stoke/index_20220529002650.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/.history/redux/stoke/index_20220529002650.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/.history/redux/stoke/slice_20220518133432.ts b/.history/redux/stoke/slice_20220518133432.ts
new file mode 100644
index 0000000..48dacb7
--- /dev/null
+++ b/.history/redux/stoke/slice_20220518133432.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StockSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const stokeSlice = createSlice({
+  name: 'stoke',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Stoke[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = stokeSlice.actions;
+
+export default stokeSlice.reducer;
diff --git a/.history/redux/stoke/slice_20220528232346.ts b/.history/redux/stoke/slice_20220528232346.ts
new file mode 100644
index 0000000..48dacb7
--- /dev/null
+++ b/.history/redux/stoke/slice_20220528232346.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StockSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const stokeSlice = createSlice({
+  name: 'stoke',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Stoke[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = stokeSlice.actions;
+
+export default stokeSlice.reducer;
diff --git a/.history/redux/stoke/stock_20220518133602.ts b/.history/redux/stoke/stock_20220518133602.ts
new file mode 100644
index 0000000..8bd91ee
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518133602.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518143147.ts b/.history/redux/stoke/stock_20220518143147.ts
new file mode 100644
index 0000000..e8b04c0
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518143147.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518143207.ts b/.history/redux/stoke/stock_20220518143207.ts
new file mode 100644
index 0000000..df5c413
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518143207.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      console.log();
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518143216.ts b/.history/redux/stoke/stock_20220518143216.ts
new file mode 100644
index 0000000..1a0bb9c
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518143216.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      console.log(process.env.DATABASE);
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518143226.ts b/.history/redux/stoke/stock_20220518143226.ts
new file mode 100644
index 0000000..53fd872
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518143226.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      console.log(process.env.DATABASE);
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518143321.ts b/.history/redux/stoke/stock_20220518143321.ts
new file mode 100644
index 0000000..53fd872
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518143321.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      console.log(process.env.DATABASE);
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518144026.ts b/.history/redux/stoke/stock_20220518144026.ts
new file mode 100644
index 0000000..2282380
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518144026.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518144528.ts b/.history/redux/stoke/stock_20220518144528.ts
new file mode 100644
index 0000000..6a34999
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518144528.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+
+      const { data } = await axios.get<Stoke[]>(process.env.SITE+`loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518144551.ts b/.history/redux/stoke/stock_20220518144551.ts
new file mode 100644
index 0000000..2282380
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518144551.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220518144602.ts b/.history/redux/stoke/stock_20220518144602.ts
new file mode 100644
index 0000000..e2fa802
--- /dev/null
+++ b/.history/redux/stoke/stock_20220518144602.ts
@@ -0,0 +1,11 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`http://localhost:3000/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220520193057.ts b/.history/redux/stoke/stock_20220520193057.ts
new file mode 100644
index 0000000..efd9257
--- /dev/null
+++ b/.history/redux/stoke/stock_20220520193057.ts
@@ -0,0 +1,11 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`/api/loadingStock`);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/stoke/stock_20220522073628.ts b/.history/redux/stoke/stock_20220522073628.ts
new file mode 100644
index 0000000..7aadb7b
--- /dev/null
+++ b/.history/redux/stoke/stock_20220522073628.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/.history/redux/store_20220516224141.ts b/.history/redux/store_20220516224141.ts
new file mode 100644
index 0000000..6999dae
--- /dev/null
+++ b/.history/redux/store_20220516224141.ts
@@ -0,0 +1,19 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {
+   // filter,
+   // cart,
+  //  pizza,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518121406.ts b/.history/redux/store_20220518121406.ts
new file mode 100644
index 0000000..841bba7
--- /dev/null
+++ b/.history/redux/store_20220518121406.ts
@@ -0,0 +1,19 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {
+   // filter,
+   // cart,
+    pizza,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518121418.ts b/.history/redux/store_20220518121418.ts
new file mode 100644
index 0000000..58c41df
--- /dev/null
+++ b/.history/redux/store_20220518121418.ts
@@ -0,0 +1,20 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit'
+
+export const store = configureStore({
+  reducer: {
+   // filter,
+   // cart,
+    pizza,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518121450.ts b/.history/redux/store_20220518121450.ts
new file mode 100644
index 0000000..78eb28f
--- /dev/null
+++ b/.history/redux/store_20220518121450.ts
@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit'
+
+export const store = configureStore({
+  reducer: {},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518121453.ts b/.history/redux/store_20220518121453.ts
new file mode 100644
index 0000000..088322f
--- /dev/null
+++ b/.history/redux/store_20220518121453.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518121538.ts b/.history/redux/store_20220518121538.ts
new file mode 100644
index 0000000..088322f
--- /dev/null
+++ b/.history/redux/store_20220518121538.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518121554.ts b/.history/redux/store_20220518121554.ts
new file mode 100644
index 0000000..6e89725
--- /dev/null
+++ b/.history/redux/store_20220518121554.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stock},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518124455.ts b/.history/redux/store_20220518124455.ts
new file mode 100644
index 0000000..088322f
--- /dev/null
+++ b/.history/redux/store_20220518124455.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518124610.ts b/.history/redux/store_20220518124610.ts
new file mode 100644
index 0000000..088322f
--- /dev/null
+++ b/.history/redux/store_20220518124610.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+//import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518131820.ts b/.history/redux/store_20220518131820.ts
new file mode 100644
index 0000000..b6a29dc
--- /dev/null
+++ b/.history/redux/store_20220518131820.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './cards/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518131826.ts b/.history/redux/store_20220518131826.ts
new file mode 100644
index 0000000..e4aaefa
--- /dev/null
+++ b/.history/redux/store_20220518131826.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './cards/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/.history/redux/store_20220518131926.ts b/.history/redux/store_20220518131926.ts
new file mode 100644
index 0000000..0174998
--- /dev/null
+++ b/.history/redux/store_20220518131926.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './cards/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220518131944.ts b/.history/redux/store_20220518131944.ts
new file mode 100644
index 0000000..0174998
--- /dev/null
+++ b/.history/redux/store_20220518131944.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './cards/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220518143023.ts b/.history/redux/store_20220518143023.ts
new file mode 100644
index 0000000..1f2c7da
--- /dev/null
+++ b/.history/redux/store_20220518143023.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220520192629.ts b/.history/redux/store_20220520192629.ts
new file mode 100644
index 0000000..2ee3ceb
--- /dev/null
+++ b/.history/redux/store_20220520192629.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, login},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220520193120.ts b/.history/redux/store_20220520193120.ts
new file mode 100644
index 0000000..1f2c7da
--- /dev/null
+++ b/.history/redux/store_20220520193120.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+//import cart from './cart/slice';
+import stoke from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220521113613.ts b/.history/redux/store_20220521113613.ts
new file mode 100644
index 0000000..15b90cb
--- /dev/null
+++ b/.history/redux/store_20220521113613.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220528225510.ts b/.history/redux/store_20220528225510.ts
new file mode 100644
index 0000000..a208640
--- /dev/null
+++ b/.history/redux/store_20220528225510.ts
@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './Categories/slice'
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220528225618.ts b/.history/redux/store_20220528225618.ts
new file mode 100644
index 0000000..86a3633
--- /dev/null
+++ b/.history/redux/store_20220528225618.ts
@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220529002955.ts b/.history/redux/store_20220529002955.ts
new file mode 100644
index 0000000..66c0e91
--- /dev/null
+++ b/.history/redux/store_20220529002955.ts
@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220529003000.ts b/.history/redux/store_20220529003000.ts
new file mode 100644
index 0000000..a6b87e9
--- /dev/null
+++ b/.history/redux/store_20220529003000.ts
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import stoke from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220529003003.ts b/.history/redux/store_20220529003003.ts
new file mode 100644
index 0000000..e54a9dd
--- /dev/null
+++ b/.history/redux/store_20220529003003.ts
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import piza from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220529003004.ts b/.history/redux/store_20220529003004.ts
new file mode 100644
index 0000000..754a82c
--- /dev/null
+++ b/.history/redux/store_20220529003004.ts
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import pizza from './stoke/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220529003008.ts b/.history/redux/store_20220529003008.ts
new file mode 100644
index 0000000..22e24db
--- /dev/null
+++ b/.history/redux/store_20220529003008.ts
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220529003009.ts b/.history/redux/store_20220529003009.ts
new file mode 100644
index 0000000..22e24db
--- /dev/null
+++ b/.history/redux/store_20220529003009.ts
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import pizza from './pizza/slice';
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/redux/store_20220615155707.ts b/.history/redux/store_20220615155707.ts
new file mode 100644
index 0000000..cde1169
--- /dev/null
+++ b/.history/redux/store_20220615155707.ts
@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import pizza from './pizza/slice';
+import pizzaToCard from './pizzaToCart/slice'
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza, pizzaToCard},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/.history/server/db/connect_20220517174650.ts b/.history/server/db/connect_20220517174650.ts
new file mode 100644
index 0000000..d9b2f78
--- /dev/null
+++ b/.history/server/db/connect_20220517174650.ts
@@ -0,0 +1,17 @@
+const mysql = require('mysql2');
+
+function Pool() {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return pool;
+}
+
+export { Pool };
\ No newline at end of file
diff --git a/.history/server/db/connect_20220517175340.ts b/.history/server/db/connect_20220517175340.ts
new file mode 100644
index 0000000..d93b015
--- /dev/null
+++ b/.history/server/db/connect_20220517175340.ts
@@ -0,0 +1,18 @@
+const mysql = require('mysql2');
+
+export default function Pool(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return pool;
+  }
diff --git a/.history/server/db/connect_20220517175350.ts b/.history/server/db/connect_20220517175350.ts
new file mode 100644
index 0000000..0dae387
--- /dev/null
+++ b/.history/server/db/connect_20220517175350.ts
@@ -0,0 +1,19 @@
+const mysql = require('mysql2');
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default function Pool(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return pool;
+  }
diff --git a/.history/server/db/connect_20220517175415.ts b/.history/server/db/connect_20220517175415.ts
new file mode 100644
index 0000000..8506c84
--- /dev/null
+++ b/.history/server/db/connect_20220517175415.ts
@@ -0,0 +1,22 @@
+const mysql = require('mysql2');
+import type { NextApiRequest, NextApiResponse } from 'next';
+type Data = {
+    name: string
+  }
+
+export default function Pool(
+    req: NextApiRequest,
+    res: NextApiResponse<Data>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return pool;
+  }
diff --git a/.history/server/db/connect_20220517190254.ts b/.history/server/db/connect_20220517190254.ts
new file mode 100644
index 0000000..86d9cdd
--- /dev/null
+++ b/.history/server/db/connect_20220517190254.ts
@@ -0,0 +1,31 @@
+const mysql = require('mysql2');
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+  const poolConfig = {
+    connectionLimit: 10,
+    host: 'example.org',
+    user: 'bob',
+    password: 'secret'
+};
+
+let pool = mysql.createPool(poolConfig);
+
+export default function Pool(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return pool;
+  }
diff --git a/.history/server/db/connect_20220517190334.ts b/.history/server/db/connect_20220517190334.ts
new file mode 100644
index 0000000..3598f50
--- /dev/null
+++ b/.history/server/db/connect_20220517190334.ts
@@ -0,0 +1,23 @@
+const mysql = require('mysql2');
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function Pool(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return pool;
+  }
diff --git a/.history/server/db/connect_20220517190403.ts b/.history/server/db/connect_20220517190403.ts
new file mode 100644
index 0000000..34fc8a7
--- /dev/null
+++ b/.history/server/db/connect_20220517190403.ts
@@ -0,0 +1,23 @@
+const mysql = require('mysql2');
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function Pool(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+
+    return res;
+  }
diff --git a/.history/server/db/connect_20220517190427.ts b/.history/server/db/connect_20220517190427.ts
new file mode 100644
index 0000000..12303d5
--- /dev/null
+++ b/.history/server/db/connect_20220517190427.ts
@@ -0,0 +1,21 @@
+const mysql = require('mysql2');
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function Pool(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191238.ts b/.history/server/db/connect_20220517191238.ts
new file mode 100644
index 0000000..3f53052
--- /dev/null
+++ b/.history/server/db/connect_20220517191238.ts
@@ -0,0 +1,21 @@
+import { createPool, Pool} from 'mysql';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function Pool(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191246.ts b/.history/server/db/connect_20220517191246.ts
new file mode 100644
index 0000000..3c43c41
--- /dev/null
+++ b/.history/server/db/connect_20220517191246.ts
@@ -0,0 +1,21 @@
+import { createPool, Pool} from 'mysql';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function init(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = mysql.createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191258.ts b/.history/server/db/connect_20220517191258.ts
new file mode 100644
index 0000000..e6dda0c
--- /dev/null
+++ b/.history/server/db/connect_20220517191258.ts
@@ -0,0 +1,21 @@
+import { createPool } from 'mysql';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function init(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191449.ts b/.history/server/db/connect_20220517191449.ts
new file mode 100644
index 0000000..4ba332e
--- /dev/null
+++ b/.history/server/db/connect_20220517191449.ts
@@ -0,0 +1,21 @@
+import {createConnection, QueryError, RowDataPacket} from 'mysql2';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function init(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = createPool({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191505.ts b/.history/server/db/connect_20220517191505.ts
new file mode 100644
index 0000000..f2d0956
--- /dev/null
+++ b/.history/server/db/connect_20220517191505.ts
@@ -0,0 +1,21 @@
+import {createConnection, QueryError, RowDataPacket} from 'mysql2';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function init(
+    res: NextApiResponse<Pool>
+  ) {
+    const pool = createConnection({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191529.ts b/.history/server/db/connect_20220517191529.ts
new file mode 100644
index 0000000..fc6a655
--- /dev/null
+++ b/.history/server/db/connect_20220517191529.ts
@@ -0,0 +1,21 @@
+import {createConnection, QueryError, RowDataPacket} from 'mysql2';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function init(
+    res: NextApiResponse<Pool>
+  ) {
+    const Pool = createConnection({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+  }
diff --git a/.history/server/db/connect_20220517191941.ts b/.history/server/db/connect_20220517191941.ts
new file mode 100644
index 0000000..b0dc13f
--- /dev/null
+++ b/.history/server/db/connect_20220517191941.ts
@@ -0,0 +1,22 @@
+import {createConnection, QueryError, RowDataPacket} from 'mysql2';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function init(
+    res: NextApiResponse<Pool>
+  ) {
+    const Pool = createConnection({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+    return Pool;
+  }
diff --git a/.history/server/db/connect_20220517191950.ts b/.history/server/db/connect_20220517191950.ts
new file mode 100644
index 0000000..e6e909e
--- /dev/null
+++ b/.history/server/db/connect_20220517191950.ts
@@ -0,0 +1,22 @@
+import {createConnection, QueryError, RowDataPacket} from 'mysql2';
+import type { NextApiResponse } from 'next';
+
+type Pool = {
+    name: string
+  }
+
+
+export default function Init(
+    res: NextApiResponse<Pool>
+  ) {
+    const Pool = createConnection({
+        host: process.env.HOST,
+        user: process.env.DATABASE,
+        database: process.env.DATABASE,
+        password: process.env.PASSWORD,
+        waitForConnections: true,
+        connectionLimit: 10,
+        queueLimit: 0
+    });
+    return Pool;
+  }
diff --git a/.history/server/db/connect_20220517192425.ts b/.history/server/db/connect_20220517192425.ts
new file mode 100644
index 0000000..a3431da
--- /dev/null
+++ b/.history/server/db/connect_20220517192425.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+export const db = mysql.createConnection({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220518140312.ts b/.history/server/db/connect_20220518140312.ts
new file mode 100644
index 0000000..5552b45
--- /dev/null
+++ b/.history/server/db/connect_20220518140312.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+export const pool = mysql.createConnection({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220518140354.ts b/.history/server/db/connect_20220518140354.ts
new file mode 100644
index 0000000..d97130a
--- /dev/null
+++ b/.history/server/db/connect_20220518140354.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+export const pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530170956.ts b/.history/server/db/connect_20220530170956.ts
new file mode 100644
index 0000000..265dbab
--- /dev/null
+++ b/.history/server/db/connect_20220530170956.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+var pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530170958.ts b/.history/server/db/connect_20220530170958.ts
new file mode 100644
index 0000000..5461f21
--- /dev/null
+++ b/.history/server/db/connect_20220530170958.ts
@@ -0,0 +1,13 @@
+import mysql from "mysql2";
+
+var pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530171000.ts b/.history/server/db/connect_20220530171000.ts
new file mode 100644
index 0000000..5461f21
--- /dev/null
+++ b/.history/server/db/connect_20220530171000.ts
@@ -0,0 +1,13 @@
+import mysql from "mysql2";
+
+var pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530171830.ts b/.history/server/db/connect_20220530171830.ts
new file mode 100644
index 0000000..d97130a
--- /dev/null
+++ b/.history/server/db/connect_20220530171830.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+export const pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530172650.ts b/.history/server/db/connect_20220530172650.ts
new file mode 100644
index 0000000..f65a186
--- /dev/null
+++ b/.history/server/db/connect_20220530172650.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+var pool  =  pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530172654.ts b/.history/server/db/connect_20220530172654.ts
new file mode 100644
index 0000000..e4e04df
--- /dev/null
+++ b/.history/server/db/connect_20220530172654.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+var  pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/connect_20220530172700.ts b/.history/server/db/connect_20220530172700.ts
new file mode 100644
index 0000000..612da2c
--- /dev/null
+++ b/.history/server/db/connect_20220530172700.ts
@@ -0,0 +1,13 @@
+import mysql from "mysql2";
+
+var  pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/.history/server/db/index_20220518110228.ts b/.history/server/db/index_20220518110228.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/server/db/index_20220518110258.ts b/.history/server/db/index_20220518110258.ts
new file mode 100644
index 0000000..9e15f91
--- /dev/null
+++ b/.history/server/db/index_20220518110258.ts
@@ -0,0 +1 @@
+export * from './connect';
\ No newline at end of file
diff --git a/.history/server/db/index_20220518110324.ts b/.history/server/db/index_20220518110324.ts
new file mode 100644
index 0000000..efa7da4
--- /dev/null
+++ b/.history/server/db/index_20220518110324.ts
@@ -0,0 +1,2 @@
+export * from './connect';
+export * from './select';
\ No newline at end of file
diff --git a/.history/server/db/select_20220518110309.ts b/.history/server/db/select_20220518110309.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/server/db/select_20220518110341.ts b/.history/server/db/select_20220518110341.ts
new file mode 100644
index 0000000..a3431da
--- /dev/null
+++ b/.history/server/db/select_20220518110341.ts
@@ -0,0 +1,11 @@
+import mysql from "mysql2";
+
+export const db = mysql.createConnection({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/select_20220518110629.ts b/.history/server/db/select_20220518110629.ts
new file mode 100644
index 0000000..836f90c
--- /dev/null
+++ b/.history/server/db/select_20220518110629.ts
@@ -0,0 +1,12 @@
+import mysql from "mysql2";
+import { db } from "../db";
+
+export const db = mysql.createConnection({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
\ No newline at end of file
diff --git a/.history/server/db/select_20220518110647.ts b/.history/server/db/select_20220518110647.ts
new file mode 100644
index 0000000..3dcca63
--- /dev/null
+++ b/.history/server/db/select_20220518110647.ts
@@ -0,0 +1,9 @@
+import mysql from "mysql2";
+import { db } from "../db";
+
+export db.query(
+    queryString,
+    (err: QueryError, rows: RowDataPacket[]) => {
+    res.status(200).json(rows);
+    }
+  );
\ No newline at end of file
diff --git a/.history/server/db/select_20220518110757.ts b/.history/server/db/select_20220518110757.ts
new file mode 100644
index 0000000..b42cd06
--- /dev/null
+++ b/.history/server/db/select_20220518110757.ts
@@ -0,0 +1,9 @@
+import mysql from "mysql2";
+import { db } from "../db";
+
+export const db.query(
+    queryString,
+    (err: QueryError, rows: RowDataPacket[]) => {
+    res.status(200).json(rows);
+    }
+  );
\ No newline at end of file
diff --git a/.history/server/types/customer_20220517193704.ts b/.history/server/types/customer_20220517193704.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/server/types/customer_20220517193713.ts b/.history/server/types/customer_20220517193713.ts
new file mode 100644
index 0000000..7819e29
--- /dev/null
+++ b/.history/server/types/customer_20220517193713.ts
@@ -0,0 +1,10 @@
+export interface BasicProduct {
+    id: number,
+  }
+  
+  export interface Product extends BasicProduct {
+    name: string,
+    description: string,
+    instockQuantity: number,
+    price: number
+  }
\ No newline at end of file
diff --git a/.history/server/types/customer_20220517193715.ts b/.history/server/types/customer_20220517193715.ts
new file mode 100644
index 0000000..d9aa881
--- /dev/null
+++ b/.history/server/types/customer_20220517193715.ts
@@ -0,0 +1,10 @@
+export interface BasicProduct {
+    id: number,
+  }
+
+  export interface Product extends BasicProduct {
+    name: string,
+    description: string,
+    instockQuantity: number,
+    price: number
+  }
\ No newline at end of file
diff --git a/.history/server/types/customer_20220517193745.ts b/.history/server/types/customer_20220517193745.ts
new file mode 100644
index 0000000..83a51aa
--- /dev/null
+++ b/.history/server/types/customer_20220517193745.ts
@@ -0,0 +1,20 @@
+export interface BasicProduct {
+    id: number,
+  }
+
+  export interface Product extends BasicProduct {
+    name: string,
+    description: string,
+    instockQuantity: number,
+    price: number
+  }
+
+  export interface BasicCustomer {
+    id: number,
+  }
+
+  export interface Customer extends BasicCustomer{
+    name: string,
+    email?: string,
+    password?: string
+  }
\ No newline at end of file
diff --git a/.history/server/types/customer_20220517193953.ts b/.history/server/types/customer_20220517193953.ts
new file mode 100644
index 0000000..a769f30
--- /dev/null
+++ b/.history/server/types/customer_20220517193953.ts
@@ -0,0 +1,9 @@
+  export interface BasicCustomer {
+    id: number,
+  }
+
+  export interface Customer extends BasicCustomer{
+    name: string,
+    email?: string,
+    password?: string
+  }
\ No newline at end of file
diff --git a/.history/server/types/order_20220517193849.ts b/.history/server/types/order_20220517193849.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/server/types/order_20220517193905.ts b/.history/server/types/order_20220517193905.ts
new file mode 100644
index 0000000..68d0f25
--- /dev/null
+++ b/.history/server/types/order_20220517193905.ts
@@ -0,0 +1,17 @@
+import {BasicProduct, Product} from "./product";
+import {BasicCustomer, Customer} from "./customer";
+
+export interface BasicOrder {
+  product: BasicProduct,
+  customer: BasicCustomer,
+  productQuantity: number
+}
+
+export interface Order extends BasicOrder {
+  orderId: number
+}
+
+export interface OrderWithDetails extends Order{
+  product: Product,
+  customer: Customer,
+}
\ No newline at end of file
diff --git a/.history/server/types/order_20220517194006.ts b/.history/server/types/order_20220517194006.ts
new file mode 100644
index 0000000..68d0f25
--- /dev/null
+++ b/.history/server/types/order_20220517194006.ts
@@ -0,0 +1,17 @@
+import {BasicProduct, Product} from "./product";
+import {BasicCustomer, Customer} from "./customer";
+
+export interface BasicOrder {
+  product: BasicProduct,
+  customer: BasicCustomer,
+  productQuantity: number
+}
+
+export interface Order extends BasicOrder {
+  orderId: number
+}
+
+export interface OrderWithDetails extends Order{
+  product: Product,
+  customer: Customer,
+}
\ No newline at end of file
diff --git a/.history/server/types/order_20220517194012.ts b/.history/server/types/order_20220517194012.ts
new file mode 100644
index 0000000..68d0f25
--- /dev/null
+++ b/.history/server/types/order_20220517194012.ts
@@ -0,0 +1,17 @@
+import {BasicProduct, Product} from "./product";
+import {BasicCustomer, Customer} from "./customer";
+
+export interface BasicOrder {
+  product: BasicProduct,
+  customer: BasicCustomer,
+  productQuantity: number
+}
+
+export interface Order extends BasicOrder {
+  orderId: number
+}
+
+export interface OrderWithDetails extends Order{
+  product: Product,
+  customer: Customer,
+}
\ No newline at end of file
diff --git a/.history/server/types/product_20220517193924.ts b/.history/server/types/product_20220517193924.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/server/types/product_20220517194000.ts b/.history/server/types/product_20220517194000.ts
new file mode 100644
index 0000000..d9aa881
--- /dev/null
+++ b/.history/server/types/product_20220517194000.ts
@@ -0,0 +1,10 @@
+export interface BasicProduct {
+    id: number,
+  }
+
+  export interface Product extends BasicProduct {
+    name: string,
+    description: string,
+    instockQuantity: number,
+    price: number
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220529002316.scss b/.history/styles/components/Box_20220529002316.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/Box_20220529002320.scss b/.history/styles/components/Box_20220529002320.scss
new file mode 100644
index 0000000..88fee27
--- /dev/null
+++ b/.history/styles/components/Box_20220529002320.scss
@@ -0,0 +1,104 @@
+@media (min-width: 640px) {
+    .shop-collection-item__container {
+      height: 204px;
+      width: 100%;
+    }
+    .shop-collection-item__info {
+      bottom: 20px;
+      left: 24px;
+    }
+  }
+  .shop-collection-item__info__container {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+    background-color: #fff;
+    color: #2e2e33;
+    border-radius: 12px;
+    padding: 4px 8px;
+    top: 4px;
+    left: 4px;
+  }
+  .shop-collection-item__info__container__icon {
+    margin-right: 4px;
+    height: 13px;
+  }
+  .shop-collection-item__img-container {
+    width: 100%;
+    height: 100%;
+    background-size: calc(163px - 32px) auto;
+    background-repeat: no-repeat;
+    background-position: center 50%;
+    position: absolute;
+    border-radius: 16px;
+    top: 0;
+  }
+  .shop-collection-item__img-container--has-description {
+    height: 70%;
+    z-index: 1;
+    border-radius: 16px;
+    background-position: center 60%;
+  }
+  .shop-collection-item__img-container-description {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    border-radius: 16px;
+  }
+  .shop-collection-item__img-container-description > span {
+    height: 32px;
+    width: calc(100% - 24px);
+    white-space: break-spaces;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    margin-bottom: 8px;
+  }
+  .vendor-list__btn--load-more {
+    display: block;
+    margin: 16px auto 32px;
+    box-sizing: border-box;
+  }
+  .vendor-list__title {
+    font-family: Montserrat-Bold, sans-serif;
+    width: 100%;
+    margin-bottom: 16px;
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 800;
+    color: #2e2e33;
+  }
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+  @media (min-width: 640px) {
+    .shop-collection-item__img-container-description > span {
+      font-size: 15px;
+      line-height: 20px;
+      margin-bottom: 14px;
+    }
+    .vendor-list__title {
+      margin-bottom: 24px;
+      font-size: 46px;
+      line-height: 64px;
+      letter-spacing: 1px;
+    }
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220529002336.scss b/.history/styles/components/Box_20220529002336.scss
new file mode 100644
index 0000000..37f404d
--- /dev/null
+++ b/.history/styles/components/Box_20220529002336.scss
@@ -0,0 +1,94 @@
+  .shop-collection-item__info__container {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+    background-color: #fff;
+    color: #2e2e33;
+    border-radius: 12px;
+    padding: 4px 8px;
+    top: 4px;
+    left: 4px;
+  }
+  .shop-collection-item__info__container__icon {
+    margin-right: 4px;
+    height: 13px;
+  }
+  .shop-collection-item__img-container {
+    width: 100%;
+    height: 100%;
+    background-size: calc(163px - 32px) auto;
+    background-repeat: no-repeat;
+    background-position: center 50%;
+    position: absolute;
+    border-radius: 16px;
+    top: 0;
+  }
+  .shop-collection-item__img-container--has-description {
+    height: 70%;
+    z-index: 1;
+    border-radius: 16px;
+    background-position: center 60%;
+  }
+  .shop-collection-item__img-container-description {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    border-radius: 16px;
+  }
+  .shop-collection-item__img-container-description > span {
+    height: 32px;
+    width: calc(100% - 24px);
+    white-space: break-spaces;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    margin-bottom: 8px;
+  }
+  .vendor-list__btn--load-more {
+    display: block;
+    margin: 16px auto 32px;
+    box-sizing: border-box;
+  }
+  .vendor-list__title {
+    font-family: Montserrat-Bold, sans-serif;
+    width: 100%;
+    margin-bottom: 16px;
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 800;
+    color: #2e2e33;
+  }
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+  @media (min-width: 640px) {
+    .shop-collection-item__img-container-description > span {
+      font-size: 15px;
+      line-height: 20px;
+      margin-bottom: 14px;
+    }
+    .vendor-list__title {
+      margin-bottom: 24px;
+      font-size: 46px;
+      line-height: 64px;
+      letter-spacing: 1px;
+    }
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220529002345.scss b/.history/styles/components/Box_20220529002345.scss
new file mode 100644
index 0000000..b67f030
--- /dev/null
+++ b/.history/styles/components/Box_20220529002345.scss
@@ -0,0 +1,21 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+  @media (min-width: 640px) {
+    .shop-collection-item__img-container-description > span {
+      font-size: 15px;
+      line-height: 20px;
+      margin-bottom: 14px;
+    }
+    .vendor-list__title {
+      margin-bottom: 24px;
+      font-size: 46px;
+      line-height: 64px;
+      letter-spacing: 1px;
+    }
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220529002352.scss b/.history/styles/components/Box_20220529002352.scss
new file mode 100644
index 0000000..08728d5
--- /dev/null
+++ b/.history/styles/components/Box_20220529002352.scss
@@ -0,0 +1,10 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220529002354.scss b/.history/styles/components/Box_20220529002354.scss
new file mode 100644
index 0000000..b32929f
--- /dev/null
+++ b/.history/styles/components/Box_20220529002354.scss
@@ -0,0 +1,11 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+  
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220529002356.scss b/.history/styles/components/Box_20220529002356.scss
new file mode 100644
index 0000000..ceefb58
--- /dev/null
+++ b/.history/styles/components/Box_20220529002356.scss
@@ -0,0 +1,11 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220616161603.scss b/.history/styles/components/Box_20220616161603.scss
new file mode 100644
index 0000000..2f0eef7
--- /dev/null
+++ b/.history/styles/components/Box_20220616161603.scss
@@ -0,0 +1,11 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+     /* display: flex; */
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220616161618.scss b/.history/styles/components/Box_20220616161618.scss
new file mode 100644
index 0000000..553718b
--- /dev/null
+++ b/.history/styles/components/Box_20220616161618.scss
@@ -0,0 +1,12 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+    display: flex;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+     
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220616161700.scss b/.history/styles/components/Box_20220616161700.scss
new file mode 100644
index 0000000..1945a2d
--- /dev/null
+++ b/.history/styles/components/Box_20220616161700.scss
@@ -0,0 +1,11 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+    display: flex;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Box_20220616163439.scss b/.history/styles/components/Box_20220616163439.scss
new file mode 100644
index 0000000..ceefb58
--- /dev/null
+++ b/.history/styles/components/Box_20220616163439.scss
@@ -0,0 +1,11 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134225.scss b/.history/styles/components/CardPizza_20220529134225.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/CardPizza_20220529134228.scss b/.history/styles/components/CardPizza_20220529134228.scss
new file mode 100644
index 0000000..5ca052b
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134228.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+  
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+  
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+  
+  .product_card_img{
+      text-align: center;
+  }
+  
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+  
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134233.scss b/.history/styles/components/CardPizza_20220529134233.scss
new file mode 100644
index 0000000..78f177c
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134233.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+  
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+  
+  .product_card_img{
+      text-align: center;
+  }
+  
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+  
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134234.scss b/.history/styles/components/CardPizza_20220529134234.scss
new file mode 100644
index 0000000..aa75f6f
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134234.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+ 
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+  
+  .product_card_img{
+      text-align: center;
+  }
+  
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+  
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134236.scss b/.history/styles/components/CardPizza_20220529134236.scss
new file mode 100644
index 0000000..1d931ec
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134236.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+  
+  .product_card_img{
+      text-align: center;
+  }
+  
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+  
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134237.scss b/.history/styles/components/CardPizza_20220529134237.scss
new file mode 100644
index 0000000..95b3f31
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134237.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+  
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+  
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134239.scss b/.history/styles/components/CardPizza_20220529134239.scss
new file mode 100644
index 0000000..c042cfa
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134239.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+  
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134241.scss b/.history/styles/components/CardPizza_20220529134241.scss
new file mode 100644
index 0000000..98b57f0
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134241.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+  
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134243.scss b/.history/styles/components/CardPizza_20220529134243.scss
new file mode 100644
index 0000000..1e0493e
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134243.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+  
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529134245.scss b/.history/styles/components/CardPizza_20220529134245.scss
new file mode 100644
index 0000000..75c276d
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529134245.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 240px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529150903.scss b/.history/styles/components/CardPizza_20220529150903.scss
new file mode 100644
index 0000000..25bb47a
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529150903.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 440px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529150935.scss b/.history/styles/components/CardPizza_20220529150935.scss
new file mode 100644
index 0000000..8e65308
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529150935.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529150937.scss b/.history/styles/components/CardPizza_20220529150937.scss
new file mode 100644
index 0000000..d52021e
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529150937.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 376px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529150944.scss b/.history/styles/components/CardPizza_20220529150944.scss
new file mode 100644
index 0000000..a901bcf
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529150944.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 400px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529151026.scss b/.history/styles/components/CardPizza_20220529151026.scss
new file mode 100644
index 0000000..157704c
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529151026.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 300px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardPizza_20220529151035.scss b/.history/styles/components/CardPizza_20220529151035.scss
new file mode 100644
index 0000000..a901bcf
--- /dev/null
+++ b/.history/styles/components/CardPizza_20220529151035.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 400px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220517174002.scss b/.history/styles/components/CardStock_20220517174002.scss
new file mode 100644
index 0000000..7f30ccb
--- /dev/null
+++ b/.history/styles/components/CardStock_20220517174002.scss
@@ -0,0 +1,92 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518141440.scss b/.history/styles/components/CardStock_20220518141440.scss
new file mode 100644
index 0000000..95465ae
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518141440.scss
@@ -0,0 +1,91 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stock{
+    
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518141506.scss b/.history/styles/components/CardStock_20220518141506.scss
new file mode 100644
index 0000000..7f30ccb
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518141506.scss
@@ -0,0 +1,92 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518142007.scss b/.history/styles/components/CardStock_20220518142007.scss
new file mode 100644
index 0000000..f1e6c19
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518142007.scss
@@ -0,0 +1,97 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518142009.scss b/.history/styles/components/CardStock_20220518142009.scss
new file mode 100644
index 0000000..f1e6c19
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518142009.scss
@@ -0,0 +1,97 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518142037.scss b/.history/styles/components/CardStock_20220518142037.scss
new file mode 100644
index 0000000..b8db911
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518142037.scss
@@ -0,0 +1,98 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: $color_blue;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518142055.scss b/.history/styles/components/CardStock_20220518142055.scss
new file mode 100644
index 0000000..976e4af
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518142055.scss
@@ -0,0 +1,103 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: $color_blue;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518142117.scss b/.history/styles/components/CardStock_20220518142117.scss
new file mode 100644
index 0000000..fa40325
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518142117.scss
@@ -0,0 +1,103 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/CardStock_20220518142237.scss b/.history/styles/components/CardStock_20220518142237.scss
new file mode 100644
index 0000000..823ffdb
--- /dev/null
+++ b/.history/styles/components/CardStock_20220518142237.scss
@@ -0,0 +1,104 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+        z-index: 100;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235004.scss b/.history/styles/components/Categories_20220528235004.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/Categories_20220528235007.scss b/.history/styles/components/Categories_20220528235007.scss
new file mode 100644
index 0000000..ecfeb6e
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235007.scss
@@ -0,0 +1,10 @@
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235015.scss b/.history/styles/components/Categories_20220528235015.scss
new file mode 100644
index 0000000..eeb53db
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235015.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235038.scss b/.history/styles/components/Categories_20220528235038.scss
new file mode 100644
index 0000000..6f47e8e
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235038.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 5px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235041.scss b/.history/styles/components/Categories_20220528235041.scss
new file mode 100644
index 0000000..8cd1a26
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235041.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 5px;
+    height: 120px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235044.scss b/.history/styles/components/Categories_20220528235044.scss
new file mode 100644
index 0000000..a14b375
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235044.scss
@@ -0,0 +1,9 @@
+.categories_skeleton{
+    width: 5px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235104.scss b/.history/styles/components/Categories_20220528235104.scss
new file mode 100644
index 0000000..0737424
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235104.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 5px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    ma
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235106.scss b/.history/styles/components/Categories_20220528235106.scss
new file mode 100644
index 0000000..5be4dd0
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235106.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 5px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235108.scss b/.history/styles/components/Categories_20220528235108.scss
new file mode 100644
index 0000000..6f657b2
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235108.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 5px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235120.scss b/.history/styles/components/Categories_20220528235120.scss
new file mode 100644
index 0000000..c366ce7
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235120.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 50px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235125.scss b/.history/styles/components/Categories_20220528235125.scss
new file mode 100644
index 0000000..cef4745
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235125.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235127.scss b/.history/styles/components/Categories_20220528235127.scss
new file mode 100644
index 0000000..6694f39
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235127.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 102px;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235128.scss b/.history/styles/components/Categories_20220528235128.scss
new file mode 100644
index 0000000..3e383d2
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235128.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 102px;
+    height: 1//20px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235132.scss b/.history/styles/components/Categories_20220528235132.scss
new file mode 100644
index 0000000..afd87b0
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235132.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 120px;
+    height: 1//20px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235136.scss b/.history/styles/components/Categories_20220528235136.scss
new file mode 100644
index 0000000..2387e46
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235136.scss
@@ -0,0 +1,10 @@
+.categories_skeleton{
+    width: 120px;
+    height: 50px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Categories_20220528235208.scss b/.history/styles/components/Categories_20220528235208.scss
new file mode 100644
index 0000000..7320f08
--- /dev/null
+++ b/.history/styles/components/Categories_20220528235208.scss
@@ -0,0 +1,9 @@
+.categories_skeleton{
+    width: 120px;
+    height: 50px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220517171914.scss b/.history/styles/components/Container_20220517171914.scss
new file mode 100644
index 0000000..4034c48
--- /dev/null
+++ b/.history/styles/components/Container_20220517171914.scss
@@ -0,0 +1,9 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144313.scss b/.history/styles/components/Container_20220529144313.scss
new file mode 100644
index 0000000..ffba07d
--- /dev/null
+++ b/.history/styles/components/Container_20220529144313.scss
@@ -0,0 +1,10 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144319.scss b/.history/styles/components/Container_20220529144319.scss
new file mode 100644
index 0000000..8f7d0cc
--- /dev/null
+++ b/.history/styles/components/Container_20220529144319.scss
@@ -0,0 +1,12 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144331.scss b/.history/styles/components/Container_20220529144331.scss
new file mode 100644
index 0000000..d39c812
--- /dev/null
+++ b/.history/styles/components/Container_20220529144331.scss
@@ -0,0 +1,12 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.box
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144338.scss b/.history/styles/components/Container_20220529144338.scss
new file mode 100644
index 0000000..158cca0
--- /dev/null
+++ b/.history/styles/components/Container_20220529144338.scss
@@ -0,0 +1,12 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.box_fix
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144340.scss b/.history/styles/components/Container_20220529144340.scss
new file mode 100644
index 0000000..b3cada0
--- /dev/null
+++ b/.history/styles/components/Container_20220529144340.scss
@@ -0,0 +1,14 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.box_fix{
+    
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144347.scss b/.history/styles/components/Container_20220529144347.scss
new file mode 100644
index 0000000..75d18ec
--- /dev/null
+++ b/.history/styles/components/Container_20220529144347.scss
@@ -0,0 +1,14 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.box_fix{
+    display: block ruby;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144351.scss b/.history/styles/components/Container_20220529144351.scss
new file mode 100644
index 0000000..7259873
--- /dev/null
+++ b/.history/styles/components/Container_20220529144351.scss
@@ -0,0 +1,14 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.box_fix{
+    display: grid;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220529144448.scss b/.history/styles/components/Container_20220529144448.scss
new file mode 100644
index 0000000..54042aa
--- /dev/null
+++ b/.history/styles/components/Container_20220529144448.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: block ruby;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220530181636.scss b/.history/styles/components/Container_20220530181636.scss
new file mode 100644
index 0000000..d92e349
--- /dev/null
+++ b/.history/styles/components/Container_20220530181636.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531141734.scss b/.history/styles/components/Container_20220531141734.scss
new file mode 100644
index 0000000..829c24f
--- /dev/null
+++ b/.history/styles/components/Container_20220531141734.scss
@@ -0,0 +1,14 @@
+.container{
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531141741.scss b/.history/styles/components/Container_20220531141741.scss
new file mode 100644
index 0000000..d92e349
--- /dev/null
+++ b/.history/styles/components/Container_20220531141741.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531141826.scss b/.history/styles/components/Container_20220531141826.scss
new file mode 100644
index 0000000..75709ff
--- /dev/null
+++ b/.history/styles/components/Container_20220531141826.scss
@@ -0,0 +1,16 @@
+.container{
+    overflow: scroll;
+    overflow: hidden
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531141827.scss b/.history/styles/components/Container_20220531141827.scss
new file mode 100644
index 0000000..8762005
--- /dev/null
+++ b/.history/styles/components/Container_20220531141827.scss
@@ -0,0 +1,16 @@
+.container{
+    overflow: scroll;
+    overflow: hidden;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531141942.scss b/.history/styles/components/Container_20220531141942.scss
new file mode 100644
index 0000000..d92e349
--- /dev/null
+++ b/.history/styles/components/Container_20220531141942.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531142121.scss b/.history/styles/components/Container_20220531142121.scss
new file mode 100644
index 0000000..38786c6
--- /dev/null
+++ b/.history/styles/components/Container_20220531142121.scss
@@ -0,0 +1,16 @@
+.container{
+    overflow: scroll;
+    
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531142126.scss b/.history/styles/components/Container_20220531142126.scss
new file mode 100644
index 0000000..be0d6e1
--- /dev/null
+++ b/.history/styles/components/Container_20220531142126.scss
@@ -0,0 +1,16 @@
+.container{
+    overflow: scroll;
+    overflow:  hidden;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531142139.scss b/.history/styles/components/Container_20220531142139.scss
new file mode 100644
index 0000000..d92e349
--- /dev/null
+++ b/.history/styles/components/Container_20220531142139.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: scroll;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Container_20220531142538.scss b/.history/styles/components/Container_20220531142538.scss
new file mode 100644
index 0000000..0cef159
--- /dev/null
+++ b/.history/styles/components/Container_20220531142538.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: auto;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220517155934.scss b/.history/styles/components/Header_20220517155934.scss
new file mode 100644
index 0000000..778228b
--- /dev/null
+++ b/.history/styles/components/Header_20220517155934.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100%;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529152151.scss b/.history/styles/components/Header_20220529152151.scss
new file mode 100644
index 0000000..cebc3b1
--- /dev/null
+++ b/.history/styles/components/Header_20220529152151.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100%;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153019.scss b/.history/styles/components/Header_20220529153019.scss
new file mode 100644
index 0000000..6ed2c89
--- /dev/null
+++ b/.history/styles/components/Header_20220529153019.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153027.scss b/.history/styles/components/Header_20220529153027.scss
new file mode 100644
index 0000000..cebc3b1
--- /dev/null
+++ b/.history/styles/components/Header_20220529153027.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100%;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153227.scss b/.history/styles/components/Header_20220529153227.scss
new file mode 100644
index 0000000..3505a35
--- /dev/null
+++ b/.history/styles/components/Header_20220529153227.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153239.scss b/.history/styles/components/Header_20220529153239.scss
new file mode 100644
index 0000000..cebc3b1
--- /dev/null
+++ b/.history/styles/components/Header_20220529153239.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100%;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153244.scss b/.history/styles/components/Header_20220529153244.scss
new file mode 100644
index 0000000..9fe6ce7
--- /dev/null
+++ b/.history/styles/components/Header_20220529153244.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vh;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153245.scss b/.history/styles/components/Header_20220529153245.scss
new file mode 100644
index 0000000..ffb344f
--- /dev/null
+++ b/.history/styles/components/Header_20220529153245.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+    left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153730.scss b/.history/styles/components/Header_20220529153730.scss
new file mode 100644
index 0000000..117baa5
--- /dev/null
+++ b/.history/styles/components/Header_20220529153730.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153743.scss b/.history/styles/components/Header_20220529153743.scss
new file mode 100644
index 0000000..dda64e6
--- /dev/null
+++ b/.history/styles/components/Header_20220529153743.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 15px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153753.scss b/.history/styles/components/Header_20220529153753.scss
new file mode 100644
index 0000000..117baa5
--- /dev/null
+++ b/.history/styles/components/Header_20220529153753.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153825.scss b/.history/styles/components/Header_20220529153825.scss
new file mode 100644
index 0000000..a9a6225
--- /dev/null
+++ b/.history/styles/components/Header_20220529153825.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 70px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153830.scss b/.history/styles/components/Header_20220529153830.scss
new file mode 100644
index 0000000..117baa5
--- /dev/null
+++ b/.history/styles/components/Header_20220529153830.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153839.scss b/.history/styles/components/Header_20220529153839.scss
new file mode 100644
index 0000000..20bb675
--- /dev/null
+++ b/.history/styles/components/Header_20220529153839.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (20px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153840.scss b/.history/styles/components/Header_20220529153840.scss
new file mode 100644
index 0000000..489de81
--- /dev/null
+++ b/.history/styles/components/Header_20220529153840.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (250px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153845.scss b/.history/styles/components/Header_20220529153845.scss
new file mode 100644
index 0000000..117baa5
--- /dev/null
+++ b/.history/styles/components/Header_20220529153845.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153935.scss b/.history/styles/components/Header_20220529153935.scss
new file mode 100644
index 0000000..723b981
--- /dev/null
+++ b/.history/styles/components/Header_20220529153935.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 40px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529153944.scss b/.history/styles/components/Header_20220529153944.scss
new file mode 100644
index 0000000..117baa5
--- /dev/null
+++ b/.history/styles/components/Header_20220529153944.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154032.scss b/.history/styles/components/Header_20220529154032.scss
new file mode 100644
index 0000000..117baa5
--- /dev/null
+++ b/.history/styles/components/Header_20220529154032.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154308.scss b/.history/styles/components/Header_20220529154308.scss
new file mode 100644
index 0000000..20bb675
--- /dev/null
+++ b/.history/styles/components/Header_20220529154308.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (20px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154309.scss b/.history/styles/components/Header_20220529154309.scss
new file mode 100644
index 0000000..7df43cb
--- /dev/null
+++ b/.history/styles/components/Header_20220529154309.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (290px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154324.scss b/.history/styles/components/Header_20220529154324.scss
new file mode 100644
index 0000000..27b45c7
--- /dev/null
+++ b/.history/styles/components/Header_20220529154324.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (390px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154334.scss b/.history/styles/components/Header_20220529154334.scss
new file mode 100644
index 0000000..391e014
--- /dev/null
+++ b/.history/styles/components/Header_20220529154334.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100%);
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154340.scss b/.history/styles/components/Header_20220529154340.scss
new file mode 100644
index 0000000..27b45c7
--- /dev/null
+++ b/.history/styles/components/Header_20220529154340.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (390px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154343.scss b/.history/styles/components/Header_20220529154343.scss
new file mode 100644
index 0000000..7df43cb
--- /dev/null
+++ b/.history/styles/components/Header_20220529154343.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (290px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154347.scss b/.history/styles/components/Header_20220529154347.scss
new file mode 100644
index 0000000..fad7e29
--- /dev/null
+++ b/.history/styles/components/Header_20220529154347.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (290px));
+        min-width: 50px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154357.scss b/.history/styles/components/Header_20220529154357.scss
new file mode 100644
index 0000000..0155b8f
--- /dev/null
+++ b/.history/styles/components/Header_20220529154357.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (290px));
+        min-width: 20px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154410.scss b/.history/styles/components/Header_20220529154410.scss
new file mode 100644
index 0000000..f490962
--- /dev/null
+++ b/.history/styles/components/Header_20220529154410.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (340px));
+        min-width: 20px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154416.scss b/.history/styles/components/Header_20220529154416.scss
new file mode 100644
index 0000000..9644cde
--- /dev/null
+++ b/.history/styles/components/Header_20220529154416.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (300px));
+        min-width: 20px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154422.scss b/.history/styles/components/Header_20220529154422.scss
new file mode 100644
index 0000000..f76df59
--- /dev/null
+++ b/.history/styles/components/Header_20220529154422.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 20px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154449.scss b/.history/styles/components/Header_20220529154449.scss
new file mode 100644
index 0000000..7af6e69
--- /dev/null
+++ b/.history/styles/components/Header_20220529154449.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 30px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154459.scss b/.history/styles/components/Header_20220529154459.scss
new file mode 100644
index 0000000..b8083fb
--- /dev/null
+++ b/.history/styles/components/Header_20220529154459.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 50px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154508.scss b/.history/styles/components/Header_20220529154508.scss
new file mode 100644
index 0000000..7d126f0
--- /dev/null
+++ b/.history/styles/components/Header_20220529154508.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 100px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154514.scss b/.history/styles/components/Header_20220529154514.scss
new file mode 100644
index 0000000..dadab01
--- /dev/null
+++ b/.history/styles/components/Header_20220529154514.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 70px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154518.scss b/.history/styles/components/Header_20220529154518.scss
new file mode 100644
index 0000000..ff954e9
--- /dev/null
+++ b/.history/styles/components/Header_20220529154518.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 80px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154524.scss b/.history/styles/components/Header_20220529154524.scss
new file mode 100644
index 0000000..dadab01
--- /dev/null
+++ b/.history/styles/components/Header_20220529154524.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 70px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154535.scss b/.history/styles/components/Header_20220529154535.scss
new file mode 100644
index 0000000..2224a00
--- /dev/null
+++ b/.history/styles/components/Header_20220529154535.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154537.scss b/.history/styles/components/Header_20220529154537.scss
new file mode 100644
index 0000000..a899f29
--- /dev/null
+++ b/.history/styles/components/Header_20220529154537.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+        width: calc(100% - (310px));
+        min-width: 70px;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154541.scss b/.history/styles/components/Header_20220529154541.scss
new file mode 100644
index 0000000..06b36d4
--- /dev/null
+++ b/.history/styles/components/Header_20220529154541.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        
+        width: calc(100% - (310px));
+        min-width: 70px;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154544.scss b/.history/styles/components/Header_20220529154544.scss
new file mode 100644
index 0000000..2752b29
--- /dev/null
+++ b/.history/styles/components/Header_20220529154544.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+        width: 100%;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        
+        width: calc(100% - (310px));
+        min-width: 70px;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154559.scss b/.history/styles/components/Header_20220529154559.scss
new file mode 100644
index 0000000..dc8a187
--- /dev/null
+++ b/.history/styles/components/Header_20220529154559.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+        width: 100%;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: calc(100% - (310px));
+        min-width: 70px;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154601.scss b/.history/styles/components/Header_20220529154601.scss
new file mode 100644
index 0000000..734b7e1
--- /dev/null
+++ b/.history/styles/components/Header_20220529154601.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+        width: 100%;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: calc(100% - (210px));
+        min-width: 70px;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154616.scss b/.history/styles/components/Header_20220529154616.scss
new file mode 100644
index 0000000..dadab01
--- /dev/null
+++ b/.history/styles/components/Header_20220529154616.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 70px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154622.scss b/.history/styles/components/Header_20220529154622.scss
new file mode 100644
index 0000000..c363405
--- /dev/null
+++ b/.history/styles/components/Header_20220529154622.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 70px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154626.scss b/.history/styles/components/Header_20220529154626.scss
new file mode 100644
index 0000000..dadab01
--- /dev/null
+++ b/.history/styles/components/Header_20220529154626.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 70px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154627.scss b/.history/styles/components/Header_20220529154627.scss
new file mode 100644
index 0000000..dadab01
--- /dev/null
+++ b/.history/styles/components/Header_20220529154627.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        min-width: 70px;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154638.scss b/.history/styles/components/Header_20220529154638.scss
new file mode 100644
index 0000000..78a701d
--- /dev/null
+++ b/.history/styles/components/Header_20220529154638.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+       
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154649.scss b/.history/styles/components/Header_20220529154649.scss
new file mode 100644
index 0000000..78304bf
--- /dev/null
+++ b/.history/styles/components/Header_20220529154649.scss
@@ -0,0 +1,109 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (300px));
+       
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154732.scss b/.history/styles/components/Header_20220529154732.scss
new file mode 100644
index 0000000..359086f
--- /dev/null
+++ b/.history/styles/components/Header_20220529154732.scss
@@ -0,0 +1,108 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (300px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154743.scss b/.history/styles/components/Header_20220529154743.scss
new file mode 100644
index 0000000..b589a61
--- /dev/null
+++ b/.history/styles/components/Header_20220529154743.scss
@@ -0,0 +1,108 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154801.scss b/.history/styles/components/Header_20220529154801.scss
new file mode 100644
index 0000000..652f0b9
--- /dev/null
+++ b/.history/styles/components/Header_20220529154801.scss
@@ -0,0 +1,108 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        min-width: 200px;
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154826.scss b/.history/styles/components/Header_20220529154826.scss
new file mode 100644
index 0000000..b5d04ee
--- /dev/null
+++ b/.history/styles/components/Header_20220529154826.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (310px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154837.scss b/.history/styles/components/Header_20220529154837.scss
new file mode 100644
index 0000000..7ce593e
--- /dev/null
+++ b/.history/styles/components/Header_20220529154837.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (300px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154848.scss b/.history/styles/components/Header_20220529154848.scss
new file mode 100644
index 0000000..ec4378c
--- /dev/null
+++ b/.history/styles/components/Header_20220529154848.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (250px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154853.scss b/.history/styles/components/Header_20220529154853.scss
new file mode 100644
index 0000000..4507c58
--- /dev/null
+++ b/.history/styles/components/Header_20220529154853.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154903.scss b/.history/styles/components/Header_20220529154903.scss
new file mode 100644
index 0000000..b66ad65
--- /dev/null
+++ b/.history/styles/components/Header_20220529154903.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+      
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154909.scss b/.history/styles/components/Header_20220529154909.scss
new file mode 100644
index 0000000..4507c58
--- /dev/null
+++ b/.history/styles/components/Header_20220529154909.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154912.scss b/.history/styles/components/Header_20220529154912.scss
new file mode 100644
index 0000000..9055987
--- /dev/null
+++ b/.history/styles/components/Header_20220529154912.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+   
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154924.scss b/.history/styles/components/Header_20220529154924.scss
new file mode 100644
index 0000000..4507c58
--- /dev/null
+++ b/.history/styles/components/Header_20220529154924.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154927.scss b/.history/styles/components/Header_20220529154927.scss
new file mode 100644
index 0000000..19acc52
--- /dev/null
+++ b/.history/styles/components/Header_20220529154927.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+       
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154943.scss b/.history/styles/components/Header_20220529154943.scss
new file mode 100644
index 0000000..4507c58
--- /dev/null
+++ b/.history/styles/components/Header_20220529154943.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        margin-top: 0;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154949.scss b/.history/styles/components/Header_20220529154949.scss
new file mode 100644
index 0000000..4ae9f2a
--- /dev/null
+++ b/.history/styles/components/Header_20220529154949.scss
@@ -0,0 +1,107 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+      
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529154957.scss b/.history/styles/components/Header_20220529154957.scss
new file mode 100644
index 0000000..0e19e8d
--- /dev/null
+++ b/.history/styles/components/Header_20220529154957.scss
@@ -0,0 +1,106 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+      
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155011.scss b/.history/styles/components/Header_20220529155011.scss
new file mode 100644
index 0000000..6b02202
--- /dev/null
+++ b/.history/styles/components/Header_20220529155011.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155024.scss b/.history/styles/components/Header_20220529155024.scss
new file mode 100644
index 0000000..6ed51f1
--- /dev/null
+++ b/.history/styles/components/Header_20220529155024.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+      
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155031.scss b/.history/styles/components/Header_20220529155031.scss
new file mode 100644
index 0000000..6b02202
--- /dev/null
+++ b/.history/styles/components/Header_20220529155031.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155125.scss b/.history/styles/components/Header_20220529155125.scss
new file mode 100644
index 0000000..edd0e93
--- /dev/null
+++ b/.history/styles/components/Header_20220529155125.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (280px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155140.scss b/.history/styles/components/Header_20220529155140.scss
new file mode 100644
index 0000000..3b83dc8
--- /dev/null
+++ b/.history/styles/components/Header_20220529155140.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (240px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155144.scss b/.history/styles/components/Header_20220529155144.scss
new file mode 100644
index 0000000..cf37e27
--- /dev/null
+++ b/.history/styles/components/Header_20220529155144.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (250px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155149.scss b/.history/styles/components/Header_20220529155149.scss
new file mode 100644
index 0000000..d770148
--- /dev/null
+++ b/.history/styles/components/Header_20220529155149.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (255px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155153.scss b/.history/styles/components/Header_20220529155153.scss
new file mode 100644
index 0000000..6b02202
--- /dev/null
+++ b/.history/styles/components/Header_20220529155153.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (260px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155159.scss b/.history/styles/components/Header_20220529155159.scss
new file mode 100644
index 0000000..b494023
--- /dev/null
+++ b/.history/styles/components/Header_20220529155159.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155501.scss b/.history/styles/components/Header_20220529155501.scss
new file mode 100644
index 0000000..2c8acaa
--- /dev/null
+++ b/.history/styles/components/Header_20220529155501.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+}
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155504.scss b/.history/styles/components/Header_20220529155504.scss
new file mode 100644
index 0000000..32eb064
--- /dev/null
+++ b/.history/styles/components/Header_20220529155504.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+}
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
diff --git a/.history/styles/components/Header_20220529155606.scss b/.history/styles/components/Header_20220529155606.scss
new file mode 100644
index 0000000..c4fc0f6
--- /dev/null
+++ b/.history/styles/components/Header_20220529155606.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
diff --git a/.history/styles/components/Header_20220529155610.scss b/.history/styles/components/Header_20220529155610.scss
new file mode 100644
index 0000000..b494023
--- /dev/null
+++ b/.history/styles/components/Header_20220529155610.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155617.scss b/.history/styles/components/Header_20220529155617.scss
new file mode 100644
index 0000000..61dbd5d
--- /dev/null
+++ b/.history/styles/components/Header_20220529155617.scss
@@ -0,0 +1,105 @@
+.header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155618.scss b/.history/styles/components/Header_20220529155618.scss
new file mode 100644
index 0000000..61dbd5d
--- /dev/null
+++ b/.history/styles/components/Header_20220529155618.scss
@@ -0,0 +1,105 @@
+.header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155710.scss b/.history/styles/components/Header_20220529155710.scss
new file mode 100644
index 0000000..b494023
--- /dev/null
+++ b/.history/styles/components/Header_20220529155710.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155922.scss b/.history/styles/components/Header_20220529155922.scss
new file mode 100644
index 0000000..0a972fb
--- /dev/null
+++ b/.history/styles/components/Header_20220529155922.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155930.scss b/.history/styles/components/Header_20220529155930.scss
new file mode 100644
index 0000000..1984803
--- /dev/null
+++ b/.history/styles/components/Header_20220529155930.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 10px;
+
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155931.scss b/.history/styles/components/Header_20220529155931.scss
new file mode 100644
index 0000000..c32e300
--- /dev/null
+++ b/.history/styles/components/Header_20220529155931.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155940.scss b/.history/styles/components/Header_20220529155940.scss
new file mode 100644
index 0000000..1984803
--- /dev/null
+++ b/.history/styles/components/Header_20220529155940.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 10px;
+
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155945.scss b/.history/styles/components/Header_20220529155945.scss
new file mode 100644
index 0000000..9078a68
--- /dev/null
+++ b/.history/styles/components/Header_20220529155945.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 90px;
+
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529155956.scss b/.history/styles/components/Header_20220529155956.scss
new file mode 100644
index 0000000..c32e300
--- /dev/null
+++ b/.history/styles/components/Header_20220529155956.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160004.scss b/.history/styles/components/Header_20220529160004.scss
new file mode 100644
index 0000000..b494023
--- /dev/null
+++ b/.history/styles/components/Header_20220529160004.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 110px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160009.scss b/.history/styles/components/Header_20220529160009.scss
new file mode 100644
index 0000000..82317ce
--- /dev/null
+++ b/.history/styles/components/Header_20220529160009.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 10px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160024.scss b/.history/styles/components/Header_20220529160024.scss
new file mode 100644
index 0000000..451095f
--- /dev/null
+++ b/.history/styles/components/Header_20220529160024.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160129.scss b/.history/styles/components/Header_20220529160129.scss
new file mode 100644
index 0000000..335eccb
--- /dev/null
+++ b/.history/styles/components/Header_20220529160129.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width:100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160130.scss b/.history/styles/components/Header_20220529160130.scss
new file mode 100644
index 0000000..451095f
--- /dev/null
+++ b/.history/styles/components/Header_20220529160130.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160134.scss b/.history/styles/components/Header_20220529160134.scss
new file mode 100644
index 0000000..cfdd11f
--- /dev/null
+++ b/.history/styles/components/Header_20220529160134.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 90px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160149.scss b/.history/styles/components/Header_20220529160149.scss
new file mode 100644
index 0000000..e1c8835
--- /dev/null
+++ b/.history/styles/components/Header_20220529160149.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 00px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160151.scss b/.history/styles/components/Header_20220529160151.scss
new file mode 100644
index 0000000..451095f
--- /dev/null
+++ b/.history/styles/components/Header_20220529160151.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160152.scss b/.history/styles/components/Header_20220529160152.scss
new file mode 100644
index 0000000..84a89be
--- /dev/null
+++ b/.history/styles/components/Header_20220529160152.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160157.scss b/.history/styles/components/Header_20220529160157.scss
new file mode 100644
index 0000000..451095f
--- /dev/null
+++ b/.history/styles/components/Header_20220529160157.scss
@@ -0,0 +1,105 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .entrance_link{
+        visibility: hidden;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160429.scss b/.history/styles/components/Header_20220529160429.scss
new file mode 100644
index 0000000..86de21d
--- /dev/null
+++ b/.history/styles/components/Header_20220529160429.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 30px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160501.scss b/.history/styles/components/Header_20220529160501.scss
new file mode 100644
index 0000000..94c985f
--- /dev/null
+++ b/.history/styles/components/Header_20220529160501.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 10px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220529160515.scss b/.history/styles/components/Header_20220529160515.scss
new file mode 100644
index 0000000..065ff49
--- /dev/null
+++ b/.history/styles/components/Header_20220529160515.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: table;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175537.scss b/.history/styles/components/Header_20220530175537.scss
new file mode 100644
index 0000000..c391bb6
--- /dev/null
+++ b/.history/styles/components/Header_20220530175537.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175552.scss b/.history/styles/components/Header_20220530175552.scss
new file mode 100644
index 0000000..2371ff6
--- /dev/null
+++ b/.history/styles/components/Header_20220530175552.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 1px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175553.scss b/.history/styles/components/Header_20220530175553.scss
new file mode 100644
index 0000000..dc96136
--- /dev/null
+++ b/.history/styles/components/Header_20220530175553.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 120px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175557.scss b/.history/styles/components/Header_20220530175557.scss
new file mode 100644
index 0000000..c391bb6
--- /dev/null
+++ b/.history/styles/components/Header_20220530175557.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 100px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175608.scss b/.history/styles/components/Header_20220530175608.scss
new file mode 100644
index 0000000..88827b9
--- /dev/null
+++ b/.history/styles/components/Header_20220530175608.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: calc(100% - (270px));
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175616.scss b/.history/styles/components/Header_20220530175616.scss
new file mode 100644
index 0000000..2b6b993
--- /dev/null
+++ b/.history/styles/components/Header_20220530175616.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 50px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175634.scss b/.history/styles/components/Header_20220530175634.scss
new file mode 100644
index 0000000..c7ce0fa
--- /dev/null
+++ b/.history/styles/components/Header_20220530175634.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 100px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 50px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175655.scss b/.history/styles/components/Header_20220530175655.scss
new file mode 100644
index 0000000..667fd20
--- /dev/null
+++ b/.history/styles/components/Header_20220530175655.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 100px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 50px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175658.scss b/.history/styles/components/Header_20220530175658.scss
new file mode 100644
index 0000000..fb40748
--- /dev/null
+++ b/.history/styles/components/Header_20220530175658.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 100px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 100px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175706.scss b/.history/styles/components/Header_20220530175706.scss
new file mode 100644
index 0000000..ca80c0e
--- /dev/null
+++ b/.history/styles/components/Header_20220530175706.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 150px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 100px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175709.scss b/.history/styles/components/Header_20220530175709.scss
new file mode 100644
index 0000000..3ea2000
--- /dev/null
+++ b/.history/styles/components/Header_20220530175709.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 100px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 15px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530175820.scss b/.history/styles/components/Header_20220530175820.scss
new file mode 100644
index 0000000..3071fad
--- /dev/null
+++ b/.history/styles/components/Header_20220530175820.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 100px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        height: 30px;
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530180023.scss b/.history/styles/components/Header_20220530180023.scss
new file mode 100644
index 0000000..bee0730
--- /dev/null
+++ b/.history/styles/components/Header_20220530180023.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 100px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530180050.scss b/.history/styles/components/Header_20220530180050.scss
new file mode 100644
index 0000000..381bb3f
--- /dev/null
+++ b/.history/styles/components/Header_20220530180050.scss
@@ -0,0 +1,100 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 100px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182037.scss b/.history/styles/components/Header_20220530182037.scss
new file mode 100644
index 0000000..09bd899
--- /dev/null
+++ b/.history/styles/components/Header_20220530182037.scss
@@ -0,0 +1,100 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 100px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 80px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182044.scss b/.history/styles/components/Header_20220530182044.scss
new file mode 100644
index 0000000..43cf692
--- /dev/null
+++ b/.history/styles/components/Header_20220530182044.scss
@@ -0,0 +1,100 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 80px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 80px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182052.scss b/.history/styles/components/Header_20220530182052.scss
new file mode 100644
index 0000000..2f51df8
--- /dev/null
+++ b/.history/styles/components/Header_20220530182052.scss
@@ -0,0 +1,100 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 80px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182059.scss b/.history/styles/components/Header_20220530182059.scss
new file mode 100644
index 0000000..5c0ca47
--- /dev/null
+++ b/.history/styles/components/Header_20220530182059.scss
@@ -0,0 +1,100 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182123.scss b/.history/styles/components/Header_20220530182123.scss
new file mode 100644
index 0000000..c097619
--- /dev/null
+++ b/.history/styles/components/Header_20220530182123.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+        
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182125.scss b/.history/styles/components/Header_20220530182125.scss
new file mode 100644
index 0000000..d28778b
--- /dev/null
+++ b/.history/styles/components/Header_20220530182125.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+        ma
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182128.scss b/.history/styles/components/Header_20220530182128.scss
new file mode 100644
index 0000000..8b01735
--- /dev/null
+++ b/.history/styles/components/Header_20220530182128.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+        margin-bottom: ;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182130.scss b/.history/styles/components/Header_20220530182130.scss
new file mode 100644
index 0000000..bb657e0
--- /dev/null
+++ b/.history/styles/components/Header_20220530182130.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+        margin-bottom: 2px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182135.scss b/.history/styles/components/Header_20220530182135.scss
new file mode 100644
index 0000000..9d9cddd
--- /dev/null
+++ b/.history/styles/components/Header_20220530182135.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+        margin-top: 2px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182154.scss b/.history/styles/components/Header_20220530182154.scss
new file mode 100644
index 0000000..5c0ca47
--- /dev/null
+++ b/.history/styles/components/Header_20220530182154.scss
@@ -0,0 +1,100 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182159.scss b/.history/styles/components/Header_20220530182159.scss
new file mode 100644
index 0000000..b79733f
--- /dev/null
+++ b/.history/styles/components/Header_20220530182159.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .li
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182203.scss b/.history/styles/components/Header_20220530182203.scss
new file mode 100644
index 0000000..b79733f
--- /dev/null
+++ b/.history/styles/components/Header_20220530182203.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .li
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182204.scss b/.history/styles/components/Header_20220530182204.scss
new file mode 100644
index 0000000..f0c3ee0
--- /dev/null
+++ b/.history/styles/components/Header_20220530182204.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182206.scss b/.history/styles/components/Header_20220530182206.scss
new file mode 100644
index 0000000..071e141
--- /dev/null
+++ b/.history/styles/components/Header_20220530182206.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .lin
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182212.scss b/.history/styles/components/Header_20220530182212.scss
new file mode 100644
index 0000000..7df882d
--- /dev/null
+++ b/.history/styles/components/Header_20220530182212.scss
@@ -0,0 +1,101 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{}
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182216.scss b/.history/styles/components/Header_20220530182216.scss
new file mode 100644
index 0000000..a16d9f1
--- /dev/null
+++ b/.history/styles/components/Header_20220530182216.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182218.scss b/.history/styles/components/Header_20220530182218.scss
new file mode 100644
index 0000000..3b2a65b
--- /dev/null
+++ b/.history/styles/components/Header_20220530182218.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        ma
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182221.scss b/.history/styles/components/Header_20220530182221.scss
new file mode 100644
index 0000000..2b97e04
--- /dev/null
+++ b/.history/styles/components/Header_20220530182221.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin: 2px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182227.scss b/.history/styles/components/Header_20220530182227.scss
new file mode 100644
index 0000000..fa2da4f
--- /dev/null
+++ b/.history/styles/components/Header_20220530182227.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        m: 2px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182228.scss b/.history/styles/components/Header_20220530182228.scss
new file mode 100644
index 0000000..f25d70f
--- /dev/null
+++ b/.history/styles/components/Header_20220530182228.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 2px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182233.scss b/.history/styles/components/Header_20220530182233.scss
new file mode 100644
index 0000000..cbd2cf6
--- /dev/null
+++ b/.history/styles/components/Header_20220530182233.scss
@@ -0,0 +1,104 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182619.scss b/.history/styles/components/Header_20220530182619.scss
new file mode 100644
index 0000000..bc71e7d
--- /dev/null
+++ b/.history/styles/components/Header_20220530182619.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 480px) and (max-width: 1024px) {
+        p {
+          font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182629.scss b/.history/styles/components/Header_20220530182629.scss
new file mode 100644
index 0000000..b16d8b0
--- /dev/null
+++ b/.history/styles/components/Header_20220530182629.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px) and (max-width: 1024px) {
+        p {
+          font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182633.scss b/.history/styles/components/Header_20220530182633.scss
new file mode 100644
index 0000000..f6db439
--- /dev/null
+++ b/.history/styles/components/Header_20220530182633.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px {
+        p {
+          font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182634.scss b/.history/styles/components/Header_20220530182634.scss
new file mode 100644
index 0000000..b16d8b0
--- /dev/null
+++ b/.history/styles/components/Header_20220530182634.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px) and (max-width: 1024px) {
+        p {
+          font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182637.scss b/.history/styles/components/Header_20220530182637.scss
new file mode 100644
index 0000000..3e46a30
--- /dev/null
+++ b/.history/styles/components/Header_20220530182637.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px) {
+        p {
+          font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182710.scss b/.history/styles/components/Header_20220530182710.scss
new file mode 100644
index 0000000..d980513
--- /dev/null
+++ b/.history/styles/components/Header_20220530182710.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px) {
+        p {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182740.scss b/.history/styles/components/Header_20220530182740.scss
new file mode 100644
index 0000000..71bfd65
--- /dev/null
+++ b/.history/styles/components/Header_20220530182740.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182741.scss b/.history/styles/components/Header_20220530182741.scss
new file mode 100644
index 0000000..71bfd65
--- /dev/null
+++ b/.history/styles/components/Header_20220530182741.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182754.scss b/.history/styles/components/Header_20220530182754.scss
new file mode 100644
index 0000000..8f8aa45
--- /dev/null
+++ b/.history/styles/components/Header_20220530182754.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 340px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182811.scss b/.history/styles/components/Header_20220530182811.scss
new file mode 100644
index 0000000..5ffd3e9
--- /dev/null
+++ b/.history/styles/components/Header_20220530182811.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 370px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530182814.scss b/.history/styles/components/Header_20220530182814.scss
new file mode 100644
index 0000000..f4a8d3c
--- /dev/null
+++ b/.history/styles/components/Header_20220530182814.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (min-width: 380px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183123.scss b/.history/styles/components/Header_20220530183123.scss
new file mode 100644
index 0000000..c81a28a
--- /dev/null
+++ b/.history/styles/components/Header_20220530183123.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 380px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183127.scss b/.history/styles/components/Header_20220530183127.scss
new file mode 100644
index 0000000..a99c24c
--- /dev/null
+++ b/.history/styles/components/Header_20220530183127.scss
@@ -0,0 +1,110 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183354.scss b/.history/styles/components/Header_20220530183354.scss
new file mode 100644
index 0000000..44e8b77
--- /dev/null
+++ b/.history/styles/components/Header_20220530183354.scss
@@ -0,0 +1,111 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183358.scss b/.history/styles/components/Header_20220530183358.scss
new file mode 100644
index 0000000..6b59154
--- /dev/null
+++ b/.history/styles/components/Header_20220530183358.scss
@@ -0,0 +1,111 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .pho
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183401.scss b/.history/styles/components/Header_20220530183401.scss
new file mode 100644
index 0000000..403868f
--- /dev/null
+++ b/.history/styles/components/Header_20220530183401.scss
@@ -0,0 +1,113 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+                
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183406.scss b/.history/styles/components/Header_20220530183406.scss
new file mode 100644
index 0000000..1535d21
--- /dev/null
+++ b/.history/styles/components/Header_20220530183406.scss
@@ -0,0 +1,113 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 120px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183507.scss b/.history/styles/components/Header_20220530183507.scss
new file mode 100644
index 0000000..13a4c44
--- /dev/null
+++ b/.history/styles/components/Header_20220530183507.scss
@@ -0,0 +1,113 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 150px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183516.scss b/.history/styles/components/Header_20220530183516.scss
new file mode 100644
index 0000000..4902c58
--- /dev/null
+++ b/.history/styles/components/Header_20220530183516.scss
@@ -0,0 +1,113 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+        margin-left: 10px;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183721.scss b/.history/styles/components/Header_20220530183721.scss
new file mode 100644
index 0000000..b73cb0f
--- /dev/null
+++ b/.history/styles/components/Header_20220530183721.scss
@@ -0,0 +1,112 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183734.scss b/.history/styles/components/Header_20220530183734.scss
new file mode 100644
index 0000000..c86227d
--- /dev/null
+++ b/.history/styles/components/Header_20220530183734.scss
@@ -0,0 +1,112 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+       
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183736.scss b/.history/styles/components/Header_20220530183736.scss
new file mode 100644
index 0000000..b73cb0f
--- /dev/null
+++ b/.history/styles/components/Header_20220530183736.scss
@@ -0,0 +1,112 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183749.scss b/.history/styles/components/Header_20220530183749.scss
new file mode 100644
index 0000000..a251578
--- /dev/null
+++ b/.history/styles/components/Header_20220530183749.scss
@@ -0,0 +1,113 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+    .
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183750.scss b/.history/styles/components/Header_20220530183750.scss
new file mode 100644
index 0000000..7f103d9
--- /dev/null
+++ b/.history/styles/components/Header_20220530183750.scss
@@ -0,0 +1,114 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+    
+    .
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183752.scss b/.history/styles/components/Header_20220530183752.scss
new file mode 100644
index 0000000..de276dc
--- /dev/null
+++ b/.history/styles/components/Header_20220530183752.scss
@@ -0,0 +1,114 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+    
+    .icon
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183800.scss b/.history/styles/components/Header_20220530183800.scss
new file mode 100644
index 0000000..bca4b03
--- /dev/null
+++ b/.history/styles/components/Header_20220530183800.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+    
+    .icon_address{
+        ma
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183802.scss b/.history/styles/components/Header_20220530183802.scss
new file mode 100644
index 0000000..d65f1f2
--- /dev/null
+++ b/.history/styles/components/Header_20220530183802.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+    
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183804.scss b/.history/styles/components/Header_20220530183804.scss
new file mode 100644
index 0000000..d65f1f2
--- /dev/null
+++ b/.history/styles/components/Header_20220530183804.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+    
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183806.scss b/.history/styles/components/Header_20220530183806.scss
new file mode 100644
index 0000000..6aec262
--- /dev/null
+++ b/.history/styles/components/Header_20220530183806.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183842.scss b/.history/styles/components/Header_20220530183842.scss
new file mode 100644
index 0000000..46c1753
--- /dev/null
+++ b/.history/styles/components/Header_20220530183842.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 70px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 60px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183855.scss b/.history/styles/components/Header_20220530183855.scss
new file mode 100644
index 0000000..00a4635
--- /dev/null
+++ b/.history/styles/components/Header_20220530183855.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 60px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 60px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183907.scss b/.history/styles/components/Header_20220530183907.scss
new file mode 100644
index 0000000..14a15a9
--- /dev/null
+++ b/.history/styles/components/Header_20220530183907.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 65px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 60px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220530183909.scss b/.history/styles/components/Header_20220530183909.scss
new file mode 100644
index 0000000..d955871
--- /dev/null
+++ b/.history/styles/components/Header_20220530183909.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 65px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 65px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142728.scss b/.history/styles/components/Header_20220531142728.scss
new file mode 100644
index 0000000..0a25c63
--- /dev/null
+++ b/.history/styles/components/Header_20220531142728.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 65px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142730.scss b/.history/styles/components/Header_20220531142730.scss
new file mode 100644
index 0000000..0a25c63
--- /dev/null
+++ b/.history/styles/components/Header_20220531142730.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 65px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142737.scss b/.history/styles/components/Header_20220531142737.scss
new file mode 100644
index 0000000..234fed3
--- /dev/null
+++ b/.history/styles/components/Header_20220531142737.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142750.scss b/.history/styles/components/Header_20220531142750.scss
new file mode 100644
index 0000000..b813c65
--- /dev/null
+++ b/.history/styles/components/Header_20220531142750.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 70px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142755.scss b/.history/styles/components/Header_20220531142755.scss
new file mode 100644
index 0000000..547cfe9
--- /dev/null
+++ b/.history/styles/components/Header_20220531142755.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 80px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142802.scss b/.history/styles/components/Header_20220531142802.scss
new file mode 100644
index 0000000..a3e5c8e
--- /dev/null
+++ b/.history/styles/components/Header_20220531142802.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 80px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 80px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142826.scss b/.history/styles/components/Header_20220531142826.scss
new file mode 100644
index 0000000..547cfe9
--- /dev/null
+++ b/.history/styles/components/Header_20220531142826.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 80px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220531142827.scss b/.history/styles/components/Header_20220531142827.scss
new file mode 100644
index 0000000..234fed3
--- /dev/null
+++ b/.history/styles/components/Header_20220531142827.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100vw;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220615035952.scss b/.history/styles/components/Header_20220615035952.scss
new file mode 100644
index 0000000..c600bda
--- /dev/null
+++ b/.history/styles/components/Header_20220615035952.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:100%;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220615040003.scss b/.history/styles/components/Header_20220615040003.scss
new file mode 100644
index 0000000..6d4891a
--- /dev/null
+++ b/.history/styles/components/Header_20220615040003.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:99%;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220615040009.scss b/.history/styles/components/Header_20220615040009.scss
new file mode 100644
index 0000000..8d99343
--- /dev/null
+++ b/.history/styles/components/Header_20220615040009.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:99.8%;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220615040029.scss b/.history/styles/components/Header_20220615040029.scss
new file mode 100644
index 0000000..59573db
--- /dev/null
+++ b/.history/styles/components/Header_20220615040029.scss
@@ -0,0 +1,116 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:99.9%;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+}
\ No newline at end of file
diff --git a/.history/styles/components/Header_20220617163154.scss b/.history/styles/components/Header_20220617163154.scss
new file mode 100644
index 0000000..0f23ca2
--- /dev/null
+++ b/.history/styles/components/Header_20220617163154.scss
@@ -0,0 +1,117 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:99.9%;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/Login_20220520131958.scss b/.history/styles/components/Login_20220520131958.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/Login_20220520132017.scss b/.history/styles/components/Login_20220520132017.scss
new file mode 100644
index 0000000..7ea964a
--- /dev/null
+++ b/.history/styles/components/Login_20220520132017.scss
@@ -0,0 +1,3 @@
+.wrapper_admin{
+    
+}
\ No newline at end of file
diff --git a/.history/styles/components/Login_20220520132058.scss b/.history/styles/components/Login_20220520132058.scss
new file mode 100644
index 0000000..74e9305
--- /dev/null
+++ b/.history/styles/components/Login_20220520132058.scss
@@ -0,0 +1,25 @@
+.wrapper_admin{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+  
+  .main_login {
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
+    background: #fff;
+    border-radius: 2px;
+    height: 390px;
+    position: relative;
+    width: 350px;
+    display:block;
+    padding: 20px;
+  }
+  
+  .main_login:hover {
+    box-shadow: 0 14px 28px
+  rgba(0,0,0,0.25), 0 10px 10px
+  rgba(0,0,0,0.22);
+  }
\ No newline at end of file
diff --git a/.history/styles/components/Login_20220520132218.scss b/.history/styles/components/Login_20220520132218.scss
new file mode 100644
index 0000000..42cc1fc
--- /dev/null
+++ b/.history/styles/components/Login_20220520132218.scss
@@ -0,0 +1,24 @@
+.wrapper_login{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+    .content {
+        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
+        background: #fff;
+        border-radius: 2px;
+        height: 390px;
+        position: relative;
+        width: 350px;
+        display:block;
+        padding: 20px;
+    }
+
+    .content:hover {
+        box-shadow: 0 14px 28px
+    rgba(0,0,0,0.25), 0 10px 10px
+    rgba(0,0,0,0.22);
+    }
+}
diff --git a/.history/styles/components/MottoBlock_20220528233728.scss b/.history/styles/components/MottoBlock_20220528233728.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/MottoBlock_20220528233746.scss b/.history/styles/components/MottoBlock_20220528233746.scss
new file mode 100644
index 0000000..a0540a3
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233746.scss
@@ -0,0 +1,29 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233801.scss b/.history/styles/components/MottoBlock_20220528233801.scss
new file mode 100644
index 0000000..a012591
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233801.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233802.scss b/.history/styles/components/MottoBlock_20220528233802.scss
new file mode 100644
index 0000000..a012591
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233802.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233912.scss b/.history/styles/components/MottoBlock_20220528233912.scss
new file mode 100644
index 0000000..3006daa
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233912.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('a/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233915.scss b/.history/styles/components/MottoBlock_20220528233915.scss
new file mode 100644
index 0000000..18a38a3
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233915.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233920.scss b/.history/styles/components/MottoBlock_20220528233920.scss
new file mode 100644
index 0000000..01c1cfa
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233920.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233924.scss b/.history/styles/components/MottoBlock_20220528233924.scss
new file mode 100644
index 0000000..7404878
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233924.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528233930.scss b/.history/styles/components/MottoBlock_20220528233930.scss
new file mode 100644
index 0000000..842f0f8
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528233930.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528234052.scss b/.history/styles/components/MottoBlock_20220528234052.scss
new file mode 100644
index 0000000..842f0f8
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528234052.scss
@@ -0,0 +1,37 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/.history/styles/components/MottoBlock_20220528234357.scss b/.history/styles/components/MottoBlock_20220528234357.scss
new file mode 100644
index 0000000..a45cfc8
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528234357.scss
@@ -0,0 +1,53 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220528234358.scss b/.history/styles/components/MottoBlock_20220528234358.scss
new file mode 100644
index 0000000..a45cfc8
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220528234358.scss
@@ -0,0 +1,53 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: inline-flex;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220529144754.scss b/.history/styles/components/MottoBlock_20220529144754.scss
new file mode 100644
index 0000000..90fc411
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220529144754.scss
@@ -0,0 +1,53 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: gx;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220529144757.scss b/.history/styles/components/MottoBlock_20220529144757.scss
new file mode 100644
index 0000000..1e88d95
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220529144757.scss
@@ -0,0 +1,53 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+}
+
+.title_header{
+    display: grid;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220529144820.scss b/.history/styles/components/MottoBlock_20220529144820.scss
new file mode 100644
index 0000000..ac0a806
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220529144820.scss
@@ -0,0 +1,54 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    ma
+}
+
+.title_header{
+    display: grid;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220529144822.scss b/.history/styles/components/MottoBlock_20220529144822.scss
new file mode 100644
index 0000000..cf0bcf5
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220529144822.scss
@@ -0,0 +1,54 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: ;
+}
+
+.title_header{
+    display: grid;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220529144823.scss b/.history/styles/components/MottoBlock_20220529144823.scss
new file mode 100644
index 0000000..f789539
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220529144823.scss
@@ -0,0 +1,54 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: grid;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/MottoBlock_20220529152902.scss b/.history/styles/components/MottoBlock_20220529152902.scss
new file mode 100644
index 0000000..d0a167a
--- /dev/null
+++ b/.history/styles/components/MottoBlock_20220529152902.scss
@@ -0,0 +1,54 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: grid;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/UX/ButtonImg_20220529143512.scss b/.history/styles/components/UX/ButtonImg_20220529143512.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/UX/ButtonImg_20220529143515.scss b/.history/styles/components/UX/ButtonImg_20220529143515.scss
new file mode 100644
index 0000000..3635201
--- /dev/null
+++ b/.history/styles/components/UX/ButtonImg_20220529143515.scss
@@ -0,0 +1,62 @@
+.video{
+    background: url('/img/video.png') 0% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.button_img_main{
+    margin-top: 10px;
+    text-align: left;
+}
+.button_img {
+  appearance: none;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  height: 50px;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  padding: 14px 30px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  transition: all .3s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  
+}
+
+.button_img:hover {
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button_img:hover:after {
+  opacity: .5;
+}
+
+.button_img:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button_img:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/ButtonImg_20220529143518.scss b/.history/styles/components/UX/ButtonImg_20220529143518.scss
new file mode 100644
index 0000000..e32bf7a
--- /dev/null
+++ b/.history/styles/components/UX/ButtonImg_20220529143518.scss
@@ -0,0 +1,61 @@
+.video{
+    background: url('/img/video.png') 0% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.button_img_main{
+    margin-top: 10px;
+    text-align: left;
+}
+.button_img {
+  appearance: none;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  height: 50px;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  padding: 14px 30px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  transition: all .3s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button_img:hover {
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button_img:hover:after {
+  opacity: .5;
+}
+
+.button_img:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button_img:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/ButtonImg_20220529143531.scss b/.history/styles/components/UX/ButtonImg_20220529143531.scss
new file mode 100644
index 0000000..9d32ad1
--- /dev/null
+++ b/.history/styles/components/UX/ButtonImg_20220529143531.scss
@@ -0,0 +1,61 @@
+.video{
+    background: url('/assets/img/video.png') 0% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.button_img_main{
+    margin-top: 10px;
+    text-align: left;
+}
+.button_img {
+  appearance: none;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  height: 50px;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  padding: 14px 30px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  transition: all .3s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button_img:hover {
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button_img:hover:after {
+  opacity: .5;
+}
+
+.button_img:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button_img:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220520132903.scss b/.history/styles/components/UX/Button_20220520132903.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/UX/Button_20220520132911.scss b/.history/styles/components/UX/Button_20220520132911.scss
new file mode 100644
index 0000000..21f2e40
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220520132911.scss
@@ -0,0 +1,85 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
diff --git a/.history/styles/components/UX/Button_20220520133451.scss b/.history/styles/components/UX/Button_20220520133451.scss
new file mode 100644
index 0000000..2e8ecca
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220520133451.scss
@@ -0,0 +1,86 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
diff --git a/.history/styles/components/UX/Button_20220520133502.scss b/.history/styles/components/UX/Button_20220520133502.scss
new file mode 100644
index 0000000..794a5eb
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220520133502.scss
@@ -0,0 +1,88 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
diff --git a/.history/styles/components/UX/Button_20220520133509.scss b/.history/styles/components/UX/Button_20220520133509.scss
new file mode 100644
index 0000000..0bcdc4d
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220520133509.scss
@@ -0,0 +1,88 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
diff --git a/.history/styles/components/UX/Button_20220520133511.scss b/.history/styles/components/UX/Button_20220520133511.scss
new file mode 100644
index 0000000..0bcdc4d
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220520133511.scss
@@ -0,0 +1,88 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
diff --git a/.history/styles/components/UX/Button_20220528234610.scss b/.history/styles/components/UX/Button_20220528234610.scss
new file mode 100644
index 0000000..a23648e
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220528234610.scss
@@ -0,0 +1,89 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
diff --git a/.history/styles/components/UX/Button_20220529142826.scss b/.history/styles/components/UX/Button_20220529142826.scss
new file mode 100644
index 0000000..ddde6a6
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529142826.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/img/video.png') 0% no-repeat;
+  height: 100px;
+  width: 120px;
+}
diff --git a/.history/styles/components/UX/Button_20220529142829.scss b/.history/styles/components/UX/Button_20220529142829.scss
new file mode 100644
index 0000000..92c86e0
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529142829.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('ass/img/video.png') 0% no-repeat;
+  height: 100px;
+  width: 120px;
+}
diff --git a/.history/styles/components/UX/Button_20220529142831.scss b/.history/styles/components/UX/Button_20220529142831.scss
new file mode 100644
index 0000000..b00fa68
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529142831.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('assets/img/video.png') 0% no-repeat;
+  height: 100px;
+  width: 120px;
+}
diff --git a/.history/styles/components/UX/Button_20220529142834.scss b/.history/styles/components/UX/Button_20220529142834.scss
new file mode 100644
index 0000000..3f2f619
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529142834.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  height: 100px;
+  width: 120px;
+}
diff --git a/.history/styles/components/UX/Button_20220529142835.scss b/.history/styles/components/UX/Button_20220529142835.scss
new file mode 100644
index 0000000..3f2f619
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529142835.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  height: 100px;
+  width: 120px;
+}
diff --git a/.history/styles/components/UX/Button_20220529143035.scss b/.history/styles/components/UX/Button_20220529143035.scss
new file mode 100644
index 0000000..1e8e20d
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143035.scss
@@ -0,0 +1,94 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+}
diff --git a/.history/styles/components/UX/Button_20220529143046.scss b/.history/styles/components/UX/Button_20220529143046.scss
new file mode 100644
index 0000000..d80dfd9
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143046.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin: 10px;
+}
diff --git a/.history/styles/components/UX/Button_20220529143058.scss b/.history/styles/components/UX/Button_20220529143058.scss
new file mode 100644
index 0000000..ee650bb
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143058.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+}
diff --git a/.history/styles/components/UX/Button_20220529143059.scss b/.history/styles/components/UX/Button_20220529143059.scss
new file mode 100644
index 0000000..ee650bb
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143059.scss
@@ -0,0 +1,95 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+}
diff --git a/.history/styles/components/UX/Button_20220529143138.scss b/.history/styles/components/UX/Button_20220529143138.scss
new file mode 100644
index 0000000..6e8d1d8
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143138.scss
@@ -0,0 +1,96 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+  border:none;
+}
diff --git a/.history/styles/components/UX/Button_20220529143227.scss b/.history/styles/components/UX/Button_20220529143227.scss
new file mode 100644
index 0000000..a275fb3
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143227.scss
@@ -0,0 +1,97 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+  border:none;
+  
+}
diff --git a/.history/styles/components/UX/Button_20220529143229.scss b/.history/styles/components/UX/Button_20220529143229.scss
new file mode 100644
index 0000000..113f61f
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143229.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.testhover:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143232.scss b/.history/styles/components/UX/Button_20220529143232.scss
new file mode 100644
index 0000000..013f933
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143232.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143233.scss b/.history/styles/components/UX/Button_20220529143233.scss
new file mode 100644
index 0000000..013f933
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143233.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143247.scss b/.history/styles/components/UX/Button_20220529143247.scss
new file mode 100644
index 0000000..a68ca74
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143247.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  h
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143249.scss b/.history/styles/components/UX/Button_20220529143249.scss
new file mode 100644
index 0000000..97c8e37
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143249.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: ;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143251.scss b/.history/styles/components/UX/Button_20220529143251.scss
new file mode 100644
index 0000000..1a55d66
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143251.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 1;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143253.scss b/.history/styles/components/UX/Button_20220529143253.scss
new file mode 100644
index 0000000..402e831
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143253.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 50px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143258.scss b/.history/styles/components/UX/Button_20220529143258.scss
new file mode 100644
index 0000000..fd0d6d4
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143258.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 20px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143302.scss b/.history/styles/components/UX/Button_20220529143302.scss
new file mode 100644
index 0000000..ad931c8
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143302.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {  border: 1px solid red; }
diff --git a/.history/styles/components/UX/Button_20220529143321.scss b/.history/styles/components/UX/Button_20220529143321.scss
new file mode 100644
index 0000000..9799696
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143321.scss
@@ -0,0 +1,99 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {   }
diff --git a/.history/styles/components/UX/Button_20220529143333.scss b/.history/styles/components/UX/Button_20220529143333.scss
new file mode 100644
index 0000000..826506b
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143333.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {   
+  background-color: $color_hover;
+}
diff --git a/.history/styles/components/UX/Button_20220529143334.scss b/.history/styles/components/UX/Button_20220529143334.scss
new file mode 100644
index 0000000..1873665
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143334.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: $color_hover;
+}
diff --git a/.history/styles/components/UX/Button_20220529143344.scss b/.history/styles/components/UX/Button_20220529143344.scss
new file mode 100644
index 0000000..44ff4d9
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143344.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 100px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: $color_hover;
+}
diff --git a/.history/styles/components/UX/Button_20220529143353.scss b/.history/styles/components/UX/Button_20220529143353.scss
new file mode 100644
index 0000000..1873665
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143353.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: $color_hover;
+}
diff --git a/.history/styles/components/UX/Button_20220529143408.scss b/.history/styles/components/UX/Button_20220529143408.scss
new file mode 100644
index 0000000..d044ac9
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143408.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: ;
+}
diff --git a/.history/styles/components/UX/Button_20220529143409.scss b/.history/styles/components/UX/Button_20220529143409.scss
new file mode 100644
index 0000000..b92b422
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143409.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: #;
+}
diff --git a/.history/styles/components/UX/Button_20220529143410.scss b/.history/styles/components/UX/Button_20220529143410.scss
new file mode 100644
index 0000000..1643096
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143410.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: #ac9437;
+}
diff --git a/.history/styles/components/UX/Button_20220529143417.scss b/.history/styles/components/UX/Button_20220529143417.scss
new file mode 100644
index 0000000..2dd0b27
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143417.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+  
+}
+.video:hover {
+  background-color: #cccbc8;
+}
diff --git a/.history/styles/components/UX/Button_20220529143428.scss b/.history/styles/components/UX/Button_20220529143428.scss
new file mode 100644
index 0000000..2c357d7
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143428.scss
@@ -0,0 +1,100 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.video{
+  background: url('/assets/img/video.png') 0% no-repeat;
+  width: 120px;
+  height: 30px;
+  margin-top: 10px;
+  border:none;
+}
+.video:hover {
+  background-color: #cccbc8;
+}
diff --git a/.history/styles/components/UX/Button_20220529143535.scss b/.history/styles/components/UX/Button_20220529143535.scss
new file mode 100644
index 0000000..c4ef6be
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220529143535.scss
@@ -0,0 +1,89 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 120px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220530182005.scss b/.history/styles/components/UX/Button_20220530182005.scss
new file mode 100644
index 0000000..0f68c73
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220530182005.scss
@@ -0,0 +1,89 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+    margin-bottom: 10px;
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220615035048.scss b/.history/styles/components/UX/Button_20220615035048.scss
new file mode 100644
index 0000000..f85153a
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220615035048.scss
@@ -0,0 +1,89 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616185713.scss b/.history/styles/components/UX/Button_20220616185713.scss
new file mode 100644
index 0000000..f2c198f
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616185713.scss
@@ -0,0 +1,90 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 325px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 10px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616185806.scss b/.history/styles/components/UX/Button_20220616185806.scss
new file mode 100644
index 0000000..d4f1e93
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616185806.scss
@@ -0,0 +1,90 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 10px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616185837.scss b/.history/styles/components/UX/Button_20220616185837.scss
new file mode 100644
index 0000000..b0f8c31
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616185837.scss
@@ -0,0 +1,90 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 10px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616185848.scss b/.history/styles/components/UX/Button_20220616185848.scss
new file mode 100644
index 0000000..4361249
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616185848.scss
@@ -0,0 +1,91 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  padding-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 10px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616185911.scss b/.history/styles/components/UX/Button_20220616185911.scss
new file mode 100644
index 0000000..db6dda5
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616185911.scss
@@ -0,0 +1,91 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 10px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616190207.scss b/.history/styles/components/UX/Button_20220616190207.scss
new file mode 100644
index 0000000..af689a7
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616190207.scss
@@ -0,0 +1,91 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616211857.scss b/.history/styles/components/UX/Button_20220616211857.scss
new file mode 100644
index 0000000..b7f4011
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616211857.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.plus{
+  background: url('/assets/img/plus.jpg') 100% 100% no-repeat;
+}
+
+.minus{
+  background: url('/assets/img/minus.jpg') 100% 100% no-repeat;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616212215.scss b/.history/styles/components/UX/Button_20220616212215.scss
new file mode 100644
index 0000000..1db648b
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616212215.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.plus{
+  background: url('/assets/img/plus.png') 100% 100% no-repeat;
+}
+
+.minus{
+  background: url('/assets/img/minus.png') 100% 100% no-repeat;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616212520.scss b/.history/styles/components/UX/Button_20220616212520.scss
new file mode 100644
index 0000000..2c88734
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616212520.scss
@@ -0,0 +1,101 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.plus{
+  background: url('/assets/img/plus.png') 100% 100% no-repeat;
+}
+
+.minus{
+  background: url('/assets/img/minus.png') !important;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616212532.scss b/.history/styles/components/UX/Button_20220616212532.scss
new file mode 100644
index 0000000..52d5b15
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616212532.scss
@@ -0,0 +1,105 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.plus{
+  background: url('/assets/img/plus.png') 100% 100% no-repeat;
+}
+
+.minus{
+  background: url('/assets/img/minus.png') !important;
+  width:80px!important;
+height:80px!important;
+margin-right: auto !important;
+margin-left: auto !important;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616212601.scss b/.history/styles/components/UX/Button_20220616212601.scss
new file mode 100644
index 0000000..2392204
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616212601.scss
@@ -0,0 +1,105 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
+
+.plus{
+  background: url('/assets/img/plus.png') 100% 100% no-repeat;
+}
+
+.minus{
+  background: url('/assets/img/minus.png');
+  width:80px!important;
+height:80px!important;
+margin-right: auto !important;
+margin-left: auto !important;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220616215537.scss b/.history/styles/components/UX/Button_20220616215537.scss
new file mode 100644
index 0000000..496a052
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220616215537.scss
@@ -0,0 +1,93 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617160950.scss b/.history/styles/components/UX/Button_20220617160950.scss
new file mode 100644
index 0000000..62490c1
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617160950.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617161021.scss b/.history/styles/components/UX/Button_20220617161021.scss
new file mode 100644
index 0000000..780b3c4
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617161021.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617161054.scss b/.history/styles/components/UX/Button_20220617161054.scss
new file mode 100644
index 0000000..d196c6a
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617161054.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617161133.scss b/.history/styles/components/UX/Button_20220617161133.scss
new file mode 100644
index 0000000..582a808
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617161133.scss
@@ -0,0 +1,98 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_h_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button {
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617163846.scss b/.history/styles/components/UX/Button_20220617163846.scss
new file mode 100644
index 0000000..4848303
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617163846.scss
@@ -0,0 +1,114 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_h_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button_border_radius_8{
+  border-radius: 8px;
+}
+
+.button_border_radius_30{
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  -ms-border-radius: 30px;
+  -o-border-radius: 30px;
+}
+
+.button {
+  
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617163857.scss b/.history/styles/components/UX/Button_20220617163857.scss
new file mode 100644
index 0000000..6aa0f5d
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617163857.scss
@@ -0,0 +1,118 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_h_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button_border_radius_8{
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+}
+
+.button_border_radius_30{
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  -ms-border-radius: 30px;
+  -o-border-radius: 30px;
+}
+
+.button {
+  
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617164009.scss b/.history/styles/components/UX/Button_20220617164009.scss
new file mode 100644
index 0000000..b004cc9
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617164009.scss
@@ -0,0 +1,109 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_h_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button_border_radius_8{
+  border-radius: 8px;
+}
+
+.button_border_radius_30{
+  border-radius: 30px;
+}
+
+.button {
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Button_20220617164039.scss b/.history/styles/components/UX/Button_20220617164039.scss
new file mode 100644
index 0000000..d8b9bfb
--- /dev/null
+++ b/.history/styles/components/UX/Button_20220617164039.scss
@@ -0,0 +1,105 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_h_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button_border_radius_8{
+  border-radius: 8px;
+}
+
+.button_border_radius_30{
+  border-radius: 30px;
+}
+
+.button {
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Input_20220520132802.scss b/.history/styles/components/UX/Input_20220520132802.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/UX/Input_20220520132815.scss b/.history/styles/components/UX/Input_20220520132815.scss
new file mode 100644
index 0000000..f6ba9e7
--- /dev/null
+++ b/.history/styles/components/UX/Input_20220520132815.scss
@@ -0,0 +1,143 @@
+$color--white : #ffffff;
+$color--black : #000000;
+$color--light-grey : #E6E6E6;
+$color--grey : #CCCCCC;
+$color--dark-grey : #7B7B7B;
+$color--primary : #2AA1C0;
+$color--secondary : #0E647D;
+
+$text-color : $color--black;
+$line-color : $color--light-grey;
+$line-color-after : $color--primary;
+$label-color : $color--dark-grey;
+$label-color-after : $color--primary;
+
+
+.input {
+  position: relative;
+  z-index: 1;
+  margin : 1em 0;
+  display: inline-block;
+  width : 100%;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.input_field {
+  position: relative;
+  display: block;
+  float: right;
+  padding: 0.8em;
+  width: 60%;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: $label-color-after;
+  font-weight: 400;
+  -webkit-appearance: none; /* for box shadows to show on iOS */
+}
+
+.input_field:focus {
+  outline: none;
+}
+
+.input_label {
+  display: inline-block;
+  float: right;
+  padding: 0 1em;
+  width: 40%;
+  color: $label-color;
+  font-weight: 400;
+  font-size: 60.25%;
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.input_label_content {
+  position: relative;
+  display: block;
+  padding: 1.2em 0;
+  width: 100%;
+}
+
+/* Individual styles */
+
+/* Ruri */
+.input_field_mui {
+  width: 100%;
+  background: transparent;
+  padding: 0.5em 0;
+  font-size: 100%;
+  margin-bottom: 0em;
+  color: $text-color;
+}
+
+.input_label_mui {
+  width: 100%;
+  position: absolute;
+  opacity: 0.6;
+  text-align: left;
+  font-size: 1em;
+  padding: 10px 0 10px 0;
+  pointer-events: none;
+}
+
+.input_label_mui::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background: $line-color;
+  left: 0%;
+  top: 85%;
+}
+
+.input_label_mui::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  background: $line-color;
+  left: 45%;
+  top: 85%;
+  -webkit-transition: all 300ms ease-in-out;
+  -moz-transition: all 300ms ease-in-out;
+  -o-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+  // -webkit-transform-origin: 50% 100%;
+  // transform-origin: 50% 100%;
+  // -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
+  // transition: transform 0.3s, background-color 0.3s;
+}
+
+.input_label_content_mui {
+  padding: 0;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transition: -webkit-transform 0.3s, color 0.3s;
+  transition: transform 0.3s, color 0.3s;
+}
+
+.input_field_mui:focus + .input_label_mui::after,
+.input_filled .input_label_mui::after {
+  left: 0;
+  width: 100%;
+  background: $line-color-after;
+  // -webkit-transform: scale3d(1, 0.25, 1);
+  // transform: scale3d(1, 0.25, 1);
+}
+
+.input_field_mui:focus + .input_label_mui .input_label-content_mui,
+.input_filled .input_label_mui .input_label_content_mui {
+  width: 100%;
+  font-weight: bold;
+  color: $label-color-after;
+  -webkit-transform: translate3d(0, -1.5em, 0) scale3d(0.680, 0.680, 1);
+  transform: translate3d(0, -1.5em, 0) scale3d(0.680, 0.680, 1);
+}
diff --git a/.history/styles/components/UX/Modal_20220603173639.scss b/.history/styles/components/UX/Modal_20220603173639.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/UX/Modal_20220603174245.scss b/.history/styles/components/UX/Modal_20220603174245.scss
new file mode 100644
index 0000000..cf11e6f
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220603174245.scss
@@ -0,0 +1,90 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220603175225.scss b/.history/styles/components/UX/Modal_20220603175225.scss
new file mode 100644
index 0000000..5765d52
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220603175225.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616142620.scss b/.history/styles/components/UX/Modal_20220616142620.scss
new file mode 100644
index 0000000..67307a2
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616142620.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616142709.scss b/.history/styles/components/UX/Modal_20220616142709.scss
new file mode 100644
index 0000000..06c5b66
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616142709.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  /* Modal Content */
+  .content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .dialog{
+    margin: 0 auto;
+  }
+
+  .footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616142830.scss b/.history/styles/components/UX/Modal_20220616142830.scss
new file mode 100644
index 0000000..ccf9799
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616142830.scss
@@ -0,0 +1,88 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+  /* Modal Content */
+  .content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+
+  .img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .dialog{
+    margin: 0 auto;
+  }
+
+  .footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616142855.scss b/.history/styles/components/UX/Modal_20220616142855.scss
new file mode 100644
index 0000000..6cd6d4c
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616142855.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616142923.scss b/.history/styles/components/UX/Modal_20220616142923.scss
new file mode 100644
index 0000000..ffaead0
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616142923.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding-right: 10px;
+    padding-top: 10px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616185749.scss b/.history/styles/components/UX/Modal_20220616185749.scss
new file mode 100644
index 0000000..229184e
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616185749.scss
@@ -0,0 +1,88 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding: 10px
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616185751.scss b/.history/styles/components/UX/Modal_20220616185751.scss
new file mode 100644
index 0000000..9bc2576
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616185751.scss
@@ -0,0 +1,88 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding: 10px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616185818.scss b/.history/styles/components/UX/Modal_20220616185818.scss
new file mode 100644
index 0000000..c5d94ce
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616185818.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    padding: 10px;
+    display: flex;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616190240.scss b/.history/styles/components/UX/Modal_20220616190240.scss
new file mode 100644
index 0000000..cdce313
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616190240.scss
@@ -0,0 +1,88 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: flex;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220616190425.scss b/.history/styles/components/UX/Modal_20220616190425.scss
new file mode 100644
index 0000000..30d84ac
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220616190425.scss
@@ -0,0 +1,89 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220617161710.scss b/.history/styles/components/UX/Modal_20220617161710.scss
new file mode 100644
index 0000000..a2a6ac7
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220617161710.scss
@@ -0,0 +1,92 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  body .modal {
+    overflow: hidden;
+  }
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220617162012.scss b/.history/styles/components/UX/Modal_20220617162012.scss
new file mode 100644
index 0000000..c00d625
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220617162012.scss
@@ -0,0 +1,92 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  body {
+    overflow: hidden;
+  }
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220617162137.scss b/.history/styles/components/UX/Modal_20220617162137.scss
new file mode 100644
index 0000000..30f2003
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220617162137.scss
@@ -0,0 +1,94 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    body {
+      overflow: hidden;
+    }
+  }
+
+
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220617162217.scss b/.history/styles/components/UX/Modal_20220617162217.scss
new file mode 100644
index 0000000..1fe9164
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220617162217.scss
@@ -0,0 +1,91 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220617163551.scss b/.history/styles/components/UX/Modal_20220617163551.scss
new file mode 100644
index 0000000..1eabfa6
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220617163551.scss
@@ -0,0 +1,92 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    border: 1px solid #888;
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220618083958.scss b/.history/styles/components/UX/Modal_20220618083958.scss
new file mode 100644
index 0000000..2b64626
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220618083958.scss
@@ -0,0 +1,92 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220618102503.scss b/.history/styles/components/UX/Modal_20220618102503.scss
new file mode 100644
index 0000000..6355f35
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220618102503.scss
@@ -0,0 +1,92 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    /*height: 100%;*/
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220618104347.scss b/.history/styles/components/UX/Modal_20220618104347.scss
new file mode 100644
index 0000000..13d86b2
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220618104347.scss
@@ -0,0 +1,90 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    /*height: 100%;*/
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/Modal_20220618145857.scss b/.history/styles/components/UX/Modal_20220618145857.scss
new file mode 100644
index 0000000..2814638
--- /dev/null
+++ b/.history/styles/components/UX/Modal_20220618145857.scss
@@ -0,0 +1,90 @@
+.modal {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* Modal Content */
+  .modal_content {
+    background-color: #fefefe;
+    margin: auto;
+    /*border: 1px solid #888;*/
+  }
+
+  .modal_body{
+    height: 100%;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .modal_img{
+    text-align: center;
+    height: 100%;
+    display: grid;;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+  }
+
+  .modal_dialog{
+    margin: 0 auto;
+  }
+
+  .modal_footer{
+    display: table;
+    margin: 0 auto;
+    margin-top: 15px;
+  }
+
+  .modal_title{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  .modal_feature{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    margin: 10px 10px 10px 15px;
+    color: #8E8E93;
+  }
+
+  .modal_description{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: 0.02em;
+    color: #252A48;
+    margin: 10px 10px 10px 15px;
+  }
+
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+    .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530191056.scss b/.history/styles/components/UX/PictureText_20220530191056.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/UX/PictureText_20220530191111.scss b/.history/styles/components/UX/PictureText_20220530191111.scss
new file mode 100644
index 0000000..dfd6499
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530191111.scss
@@ -0,0 +1,18 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+}
+
+.pictureText_text{
+    display:block;
+}
+
+.pictureText_box{
+    width: 256px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192315.scss b/.history/styles/components/UX/PictureText_20220530192315.scss
new file mode 100644
index 0000000..7e9aa12
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192315.scss
@@ -0,0 +1,18 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+
+
+.pictureText_text{
+    display:block;
+}
+
+.pictureText_box{
+    width: 256px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192317.scss b/.history/styles/components/UX/PictureText_20220530192317.scss
new file mode 100644
index 0000000..da3106c
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192317.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+
+
+.pictureText_text{
+    display:block;
+}
+
+.pictureText_box{
+    width: 256px;
+    text-align: center;
+}
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192319.scss b/.history/styles/components/UX/PictureText_20220530192319.scss
new file mode 100644
index 0000000..782ba57
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192319.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+
+
+    .pictureText_text{
+        display:block;
+    }
+
+    .pictureText_box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192323.scss b/.history/styles/components/UX/PictureText_20220530192323.scss
new file mode 100644
index 0000000..98d9021
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192323.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+
+
+    .text{
+        display:block;
+    }
+
+    .pictureText_box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192326.scss b/.history/styles/components/UX/PictureText_20220530192326.scss
new file mode 100644
index 0000000..8b70656
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192326.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+
+
+    .text{
+        display:block;
+    }
+
+    .box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192327.scss b/.history/styles/components/UX/PictureText_20220530192327.scss
new file mode 100644
index 0000000..8b70656
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192327.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+   /* margin-left: 60px; */
+
+
+    .text{
+        display:block;
+    }
+
+    .box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192359.scss b/.history/styles/components/UX/PictureText_20220530192359.scss
new file mode 100644
index 0000000..89e8aad
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192359.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    margin-left: 60px;
+
+
+    .text{
+        display:block;
+    }
+
+    .box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/UX/PictureText_20220530192417.scss b/.history/styles/components/UX/PictureText_20220530192417.scss
new file mode 100644
index 0000000..88ee530
--- /dev/null
+++ b/.history/styles/components/UX/PictureText_20220530192417.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    margin-left: 40px;
+
+
+    .text{
+        display:block;
+    }
+
+    .box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/CardBasketProduct_20220618083013.scss b/.history/styles/components/block/CardBasketProduct_20220618083013.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/CardBasketProduct_20220618083044.scss b/.history/styles/components/block/CardBasketProduct_20220618083044.scss
new file mode 100644
index 0000000..9d4fe5c
--- /dev/null
+++ b/.history/styles/components/block/CardBasketProduct_20220618083044.scss
@@ -0,0 +1,53 @@
+.card_basket_product_main{
+    width: 388px;
+    height: 80px;
+    margin: 0px 10px 10px 23px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+}
+
+.card_basket_product_img{
+    margin: 10px;
+}
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/CardBasketProduct_20220618144905.scss b/.history/styles/components/block/CardBasketProduct_20220618144905.scss
new file mode 100644
index 0000000..13a24c5
--- /dev/null
+++ b/.history/styles/components/block/CardBasketProduct_20220618144905.scss
@@ -0,0 +1,53 @@
+.card_basket_product_main{
+    width: 388px;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+}
+
+.card_basket_product_img{
+    margin: 10px;
+}
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/CardBasketProduct_20220618145144.scss b/.history/styles/components/block/CardBasketProduct_20220618145144.scss
new file mode 100644
index 0000000..4432e5f
--- /dev/null
+++ b/.history/styles/components/block/CardBasketProduct_20220618145144.scss
@@ -0,0 +1,53 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+}
+
+.card_basket_product_img{
+    margin: 10px;
+}
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/CardPizza_20220529151034.scss b/.history/styles/components/block/CardPizza_20220529151034.scss
new file mode 100644
index 0000000..a901bcf
--- /dev/null
+++ b/.history/styles/components/block/CardPizza_20220529151034.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 400px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px; 
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/CardPizza_20220530180959.scss b/.history/styles/components/block/CardPizza_20220530180959.scss
new file mode 100644
index 0000000..11314c6
--- /dev/null
+++ b/.history/styles/components/block/CardPizza_20220530180959.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 400px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Cart_20220618081317.scss b/.history/styles/components/block/Cart_20220618081317.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/Cart_20220618081408.scss b/.history/styles/components/block/Cart_20220618081408.scss
new file mode 100644
index 0000000..82d1b62
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618081408.scss
@@ -0,0 +1,31 @@
+.modal_card{
+    height: 533px;
+    width: 900px;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+    .header{
+        height: 450px;
+    }
+
+    .position_product{
+        padding-top: 100px;
+        margin: 0 auto;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Cart_20220618081915.scss b/.history/styles/components/block/Cart_20220618081915.scss
new file mode 100644
index 0000000..f5c9dad
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618081915.scss
@@ -0,0 +1,131 @@
+.modal_header{
+    height: 450px;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+    .position_basket{
+        padding-top: 80px;
+        position: absolute;
+        right: 0;
+    }
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .basket_body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .footer{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618082416.scss b/.history/styles/components/block/Cart_20220618082416.scss
new file mode 100644
index 0000000..20992b1
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618082416.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .basket_body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .footer{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618083423.scss b/.history/styles/components/block/Cart_20220618083423.scss
new file mode 100644
index 0000000..8329744
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618083423.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .footer{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618083535.scss b/.history/styles/components/block/Cart_20220618083535.scss
new file mode 100644
index 0000000..8ea9162
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618083535.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618084101.scss b/.history/styles/components/block/Cart_20220618084101.scss
new file mode 100644
index 0000000..66d5728
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618084101.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618084158.scss b/.history/styles/components/block/Cart_20220618084158.scss
new file mode 100644
index 0000000..ecee988
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618084158.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618084223.scss b/.history/styles/components/block/Cart_20220618084223.scss
new file mode 100644
index 0000000..726403b
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618084223.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 830px;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618101632.scss b/.history/styles/components/block/Cart_20220618101632.scss
new file mode 100644
index 0000000..520058b
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618101632.scss
@@ -0,0 +1,132 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100%;
+    width: 430px;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618102221.scss b/.history/styles/components/block/Cart_20220618102221.scss
new file mode 100644
index 0000000..aab0c25
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618102221.scss
@@ -0,0 +1,135 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100%;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618102418.scss b/.history/styles/components/block/Cart_20220618102418.scss
new file mode 100644
index 0000000..76a2439
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618102418.scss
@@ -0,0 +1,135 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618105947.scss b/.history/styles/components/block/Cart_20220618105947.scss
new file mode 100644
index 0000000..d526534
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618105947.scss
@@ -0,0 +1,136 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 700px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618105959.scss b/.history/styles/components/block/Cart_20220618105959.scss
new file mode 100644
index 0000000..d4f97b1
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618105959.scss
@@ -0,0 +1,136 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 500px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618110004.scss b/.history/styles/components/block/Cart_20220618110004.scss
new file mode 100644
index 0000000..f324edb
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618110004.scss
@@ -0,0 +1,136 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618110009.scss b/.history/styles/components/block/Cart_20220618110009.scss
new file mode 100644
index 0000000..1b76d7c
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618110009.scss
@@ -0,0 +1,136 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 900px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618110146.scss b/.history/styles/components/block/Cart_20220618110146.scss
new file mode 100644
index 0000000..d2c588f
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618110146.scss
@@ -0,0 +1,136 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 900px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        /*height: 400px;*/
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618110215.scss b/.history/styles/components/block/Cart_20220618110215.scss
new file mode 100644
index 0000000..8561a3a
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618110215.scss
@@ -0,0 +1,136 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        /*height: 400px;*/
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618110943.scss b/.history/styles/components/block/Cart_20220618110943.scss
new file mode 100644
index 0000000..bfa5c19
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618110943.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        /*height: 400px;*/
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+        height: 170px;
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618110948.scss b/.history/styles/components/block/Cart_20220618110948.scss
new file mode 100644
index 0000000..3702a67
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618110948.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        /*height: 400px;*/
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618111018.scss b/.history/styles/components/block/Cart_20220618111018.scss
new file mode 100644
index 0000000..c304fd9
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618111018.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618111052.scss b/.history/styles/components/block/Cart_20220618111052.scss
new file mode 100644
index 0000000..68f3165
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618111052.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 400px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618111059.scss b/.history/styles/components/block/Cart_20220618111059.scss
new file mode 100644
index 0000000..138912b
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618111059.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 100px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618111241.scss b/.history/styles/components/block/Cart_20220618111241.scss
new file mode 100644
index 0000000..e667ac6
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618111241.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200px;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618111250.scss b/.history/styles/components/block/Cart_20220618111250.scss
new file mode 100644
index 0000000..31e5434
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618111250.scss
@@ -0,0 +1,138 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618111259.scss b/.history/styles/components/block/Cart_20220618111259.scss
new file mode 100644
index 0000000..88efe2d
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618111259.scss
@@ -0,0 +1,139 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.basket{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618143440.scss b/.history/styles/components/block/Cart_20220618143440.scss
new file mode 100644
index 0000000..2fbb4f8
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618143440.scss
@@ -0,0 +1,139 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.cart{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: 100%;
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/Cart_20220618144725.scss b/.history/styles/components/block/Cart_20220618144725.scss
new file mode 100644
index 0000000..22e5154
--- /dev/null
+++ b/.history/styles/components/block/Cart_20220618144725.scss
@@ -0,0 +1,139 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.cart{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/styles/components/block/DeliveryArea_20220531161322.scss b/.history/styles/components/block/DeliveryArea_20220531161322.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/DeliveryArea_20220531161326.scss b/.history/styles/components/block/DeliveryArea_20220531161326.scss
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161326.scss
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/.history/styles/components/block/DeliveryArea_20220531161329.scss b/.history/styles/components/block/DeliveryArea_20220531161329.scss
new file mode 100644
index 0000000..9a52c76
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161329.scss
@@ -0,0 +1,8 @@
+{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/DeliveryArea_20220531161332.scss b/.history/styles/components/block/DeliveryArea_20220531161332.scss
new file mode 100644
index 0000000..9a52c76
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161332.scss
@@ -0,0 +1,8 @@
+{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/DeliveryArea_20220531161337.scss b/.history/styles/components/block/DeliveryArea_20220531161337.scss
new file mode 100644
index 0000000..3ef0dd2
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161337.scss
@@ -0,0 +1,8 @@
+.title{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/DeliveryArea_20220531161338.scss b/.history/styles/components/block/DeliveryArea_20220531161338.scss
new file mode 100644
index 0000000..ce1b6ea
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161338.scss
@@ -0,0 +1,8 @@
+.title_{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/DeliveryArea_20220531161349.scss b/.history/styles/components/block/DeliveryArea_20220531161349.scss
new file mode 100644
index 0000000..e78ccbb
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161349.scss
@@ -0,0 +1,8 @@
+.title_delivery{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/DeliveryArea_20220531161350.scss b/.history/styles/components/block/DeliveryArea_20220531161350.scss
new file mode 100644
index 0000000..e78ccbb
--- /dev/null
+++ b/.history/styles/components/block/DeliveryArea_20220531161350.scss
@@ -0,0 +1,8 @@
+.title_delivery{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193439.scss b/.history/styles/components/block/FooterNav_20220530193439.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/FooterNav_20220530193514.scss b/.history/styles/components/block/FooterNav_20220530193514.scss
new file mode 100644
index 0000000..1eeb28a
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193514.scss
@@ -0,0 +1,78 @@
+.footer_nav .col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+
+.hr {
+  border: 1px solid #8E8E93;
+  background-color:#8E8E93;
+  color: #8E8E93;
+  display: flow-root list-item;
+  margin-top: 20px;
+  margin-bottom: 50px;
+  height: 1px;
+  width: 100%;
+  
+ }
+
+.footer_nav .col h1 {
+  margin: 0;
+  padding: 0;
+  display: block;
+  font-family: inherit;
+  padding: 20px 0px 5px 0px;
+  font-style: normal;
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.footer_nav .col ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer_nav .col ul li {
+  color: #000000;
+  font-size: 14px;
+  font-family: inherit;
+  margin: 14px 0px;
+  cursor: pointer;
+  display: block;
+}
+
+.footer_nav ul li {
+  display: inline-block;
+  padding-right: 5px !important;
+}
+  
+.footer_nav .col ul li:hover {
+  transition: .1s;
+  -webkit-transition: .1s;
+  -moz-transition: .1s;
+}
+
+.clearfix {
+  clear: both;
+}
+
+.telephone{
+  min-width: 200px;
+  height: auto;
+  float: inline-end;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  padding: 0px 60px 20px 0px;
+}
+
+.contain_left{
+  width: 50%;
+  margin-left: 50px;
+}
+ 
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193515.scss b/.history/styles/components/block/FooterNav_20220530193515.scss
new file mode 100644
index 0000000..9ba6a05
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193515.scss
@@ -0,0 +1,78 @@
+.footer_nav .col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+
+.hr {
+  border: 1px solid #8E8E93;
+  background-color:#8E8E93;
+  color: #8E8E93;
+  display: flow-root list-item;
+  margin-top: 20px;
+  margin-bottom: 50px;
+  height: 1px;
+  width: 100%;
+  
+ }
+
+.footer_nav .col h1 {
+  margin: 0;
+  padding: 0;
+  display: block;
+  font-family: inherit;
+  padding: 20px 0px 5px 0px;
+  font-style: normal;
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.footer_nav .col ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer_nav .col ul li {
+  color: #000000;
+  font-size: 14px;
+  font-family: inherit;
+  margin: 14px 0px;
+  cursor: pointer;
+  display: block;
+}
+
+.footer_nav ul li {
+  display: inline-block;
+  padding-right: 5px !important;
+}
+  
+.footer_nav .col ul li:hover {
+  transition: .1s;
+  -webkit-transition: .1s;
+  -moz-transition: .1s;
+}
+
+.clearfix {
+  clear: both;
+}
+
+.telephone{
+  min-width: 200px;
+  height: auto;
+  float: inline-end;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  padding: 0px 60px 20px 0px;
+}
+
+.contain_left{
+  width: 50%;
+  margin-left: 50px;
+}
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193523.scss b/.history/styles/components/block/FooterNav_20220530193523.scss
new file mode 100644
index 0000000..3de9781
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193523.scss
@@ -0,0 +1,78 @@
+.footer_nav .col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193525.scss b/.history/styles/components/block/FooterNav_20220530193525.scss
new file mode 100644
index 0000000..c4598f8
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193525.scss
@@ -0,0 +1,77 @@
+.footer_nav .col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193910.scss b/.history/styles/components/block/FooterNav_20220530193910.scss
new file mode 100644
index 0000000..7494abb
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193910.scss
@@ -0,0 +1,78 @@
+.footer_nav 
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193913.scss b/.history/styles/components/block/FooterNav_20220530193913.scss
new file mode 100644
index 0000000..a69e1f9
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193913.scss
@@ -0,0 +1,78 @@
+.footer_nav {} 
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193914.scss b/.history/styles/components/block/FooterNav_20220530193914.scss
new file mode 100644
index 0000000..b83d7eb
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193914.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193916.scss b/.history/styles/components/block/FooterNav_20220530193916.scss
new file mode 100644
index 0000000..91a533b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193916.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193921.scss b/.history/styles/components/block/FooterNav_20220530193921.scss
new file mode 100644
index 0000000..69bf7dc
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193921.scss
@@ -0,0 +1,79 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193939.scss b/.history/styles/components/block/FooterNav_20220530193939.scss
new file mode 100644
index 0000000..1c80017
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193939.scss
@@ -0,0 +1,79 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193940.scss b/.history/styles/components/block/FooterNav_20220530193940.scss
new file mode 100644
index 0000000..5f6e728
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193940.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+    border: 1px solid #8E8E93;
+    background-color:#8E8E93;
+    color: #8E8E93;
+    display: flow-root list-item;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    height: 1px;
+    width: 100%;
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193943.scss b/.history/styles/components/block/FooterNav_20220530193943.scss
new file mode 100644
index 0000000..abe1a7a
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193943.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-family: inherit;
+    padding: 20px 0px 5px 0px;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193946.scss b/.history/styles/components/block/FooterNav_20220530193946.scss
new file mode 100644
index 0000000..2b86090
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193946.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193949.scss b/.history/styles/components/block/FooterNav_20220530193949.scss
new file mode 100644
index 0000000..b49490b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193949.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+    color: #000000;
+    font-size: 14px;
+    font-family: inherit;
+    margin: 14px 0px;
+    cursor: pointer;
+    display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193952.scss b/.history/styles/components/block/FooterNav_20220530193952.scss
new file mode 100644
index 0000000..a2c638c
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193952.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+    display: inline-block;
+    padding-right: 5px !important;
+    }
+    
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193955.scss b/.history/styles/components/block/FooterNav_20220530193955.scss
new file mode 100644
index 0000000..ba3052a
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193955.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193957.scss b/.history/styles/components/block/FooterNav_20220530193957.scss
new file mode 100644
index 0000000..e31af23
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193957.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193958.scss b/.history/styles/components/block/FooterNav_20220530193958.scss
new file mode 100644
index 0000000..dd66fcd
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193958.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+    
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530193959.scss b/.history/styles/components/block/FooterNav_20220530193959.scss
new file mode 100644
index 0000000..e31af23
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530193959.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+    clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530194001.scss b/.history/styles/components/block/FooterNav_20220530194001.scss
new file mode 100644
index 0000000..728d81b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530194001.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+    min-width: 200px;
+    height: auto;
+    float: inline-end;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530194002.scss b/.history/styles/components/block/FooterNav_20220530194002.scss
new file mode 100644
index 0000000..cf497b2
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530194002.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+    width: 50%;
+    margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220530194005.scss b/.history/styles/components/block/FooterNav_20220530194005.scss
new file mode 100644
index 0000000..8329e82
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220530194005.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 220px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531133432.scss b/.history/styles/components/block/FooterNav_20220531133432.scss
new file mode 100644
index 0000000..74a5df3
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531133432.scss
@@ -0,0 +1,78 @@
+.footer_nav { 
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531133440.scss b/.history/styles/components/block/FooterNav_20220531133440.scss
new file mode 100644
index 0000000..08e4d82
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531133440.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134039.scss b/.history/styles/components/block/FooterNav_20220531134039.scss
new file mode 100644
index 0000000..8bfae40
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134039.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134043.scss b/.history/styles/components/block/FooterNav_20220531134043.scss
new file mode 100644
index 0000000..1b8fe5b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134043.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col 
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134046.scss b/.history/styles/components/block/FooterNav_20220531134046.scss
new file mode 100644
index 0000000..e4160d9
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134046.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 }|
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134048.scss b/.history/styles/components/block/FooterNav_20220531134048.scss
new file mode 100644
index 0000000..db8ebf0
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134048.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 {|
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134049.scss b/.history/styles/components/block/FooterNav_20220531134049.scss
new file mode 100644
index 0000000..d5f05a0
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134049.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 {}|
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134052.scss b/.history/styles/components/block/FooterNav_20220531134052.scss
new file mode 100644
index 0000000..ab0aa91
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134052.scss
@@ -0,0 +1,80 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 {
+        fo
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134055.scss b/.history/styles/components/block/FooterNav_20220531134055.scss
new file mode 100644
index 0000000..de8f66d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134055.scss
@@ -0,0 +1,80 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 {
+        font-size: 2-p;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134057.scss b/.history/styles/components/block/FooterNav_20220531134057.scss
new file mode 100644
index 0000000..9279658
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134057.scss
@@ -0,0 +1,80 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 {
+        font-size: 2;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134059.scss b/.history/styles/components/block/FooterNav_20220531134059.scss
new file mode 100644
index 0000000..d3b3d71
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134059.scss
@@ -0,0 +1,80 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col h2 {
+        font-size: 20px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134151.scss b/.history/styles/components/block/FooterNav_20220531134151.scss
new file mode 100644
index 0000000..e94a067
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134151.scss
@@ -0,0 +1,80 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-size: 20px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134234.scss b/.history/styles/components/block/FooterNav_20220531134234.scss
new file mode 100644
index 0000000..63e6190
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134234.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134236.scss b/.history/styles/components/block/FooterNav_20220531134236.scss
new file mode 100644
index 0000000..bab92f3
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134236.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+font-size: 20px;
+line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134239.scss b/.history/styles/components/block/FooterNav_20220531134239.scss
new file mode 100644
index 0000000..b359da1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134239.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134241.scss b/.history/styles/components/block/FooterNav_20220531134241.scss
new file mode 100644
index 0000000..075068b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134241.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+        width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134334.scss b/.history/styles/components/block/FooterNav_20220531134334.scss
new file mode 100644
index 0000000..4a185b8
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134334.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%;
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134337.scss b/.history/styles/components/block/FooterNav_20220531134337.scss
new file mode 100644
index 0000000..10e9c84
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134337.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134338.scss b/.history/styles/components/block/FooterNav_20220531134338.scss
new file mode 100644
index 0000000..10e9c84
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134338.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134513.scss b/.history/styles/components/block/FooterNav_20220531134513.scss
new file mode 100644
index 0000000..ff32074
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134513.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134536.scss b/.history/styles/components/block/FooterNav_20220531134536.scss
new file mode 100644
index 0000000..ac092aa
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134536.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134621.scss b/.history/styles/components/block/FooterNav_20220531134621.scss
new file mode 100644
index 0000000..72f79d5
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134621.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134622.scss b/.history/styles/components/block/FooterNav_20220531134622.scss
new file mode 100644
index 0000000..4e43162
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134622.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col 
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134626.scss b/.history/styles/components/block/FooterNav_20220531134626.scss
new file mode 100644
index 0000000..c3c7ee9
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134626.scss
@@ -0,0 +1,88 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134635.scss b/.history/styles/components/block/FooterNav_20220531134635.scss
new file mode 100644
index 0000000..1047bbe
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134635.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+    
+    .footer_nav .col ul li {
+        color: #000000;
+        font-size: 14px;
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134638.scss b/.history/styles/components/block/FooterNav_20220531134638.scss
new file mode 100644
index 0000000..4f7d732
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134638.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+        font-family: inherit;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134646.scss b/.history/styles/components/block/FooterNav_20220531134646.scss
new file mode 100644
index 0000000..d666cb4
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134646.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+        list-style-type: none; 
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134650.scss b/.history/styles/components/block/FooterNav_20220531134650.scss
new file mode 100644
index 0000000..82ac317
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134650.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+        display: block;
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134653.scss b/.history/styles/components/block/FooterNav_20220531134653.scss
new file mode 100644
index 0000000..43aada7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134653.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+        padding-right: 5px !important;
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134703.scss b/.history/styles/components/block/FooterNav_20220531134703.scss
new file mode 100644
index 0000000..0b177a1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134703.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134704.scss b/.history/styles/components/block/FooterNav_20220531134704.scss
new file mode 100644
index 0000000..0b177a1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134704.scss
@@ -0,0 +1,89 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134715.scss b/.history/styles/components/block/FooterNav_20220531134715.scss
new file mode 100644
index 0000000..95d3741
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134715.scss
@@ -0,0 +1,90 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134745.scss b/.history/styles/components/block/FooterNav_20220531134745.scss
new file mode 100644
index 0000000..b70d463
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134745.scss
@@ -0,0 +1,85 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134748.scss b/.history/styles/components/block/FooterNav_20220531134748.scss
new file mode 100644
index 0000000..95f1dee
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134748.scss
@@ -0,0 +1,91 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+    .col p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134750.scss b/.history/styles/components/block/FooterNav_20220531134750.scss
new file mode 100644
index 0000000..b042563
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134750.scss
@@ -0,0 +1,91 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+    . p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134751.scss b/.history/styles/components/block/FooterNav_20220531134751.scss
new file mode 100644
index 0000000..9136e37
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134751.scss
@@ -0,0 +1,91 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134753.scss b/.history/styles/components/block/FooterNav_20220531134753.scss
new file mode 100644
index 0000000..11206ae
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134753.scss
@@ -0,0 +1,92 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+    
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134757.scss b/.history/styles/components/block/FooterNav_20220531134757.scss
new file mode 100644
index 0000000..44de435
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134757.scss
@@ -0,0 +1,92 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .footer_nav .col p {
+        margin: 0;
+        padding: 0;
+        display: block;
+        font-family: inherit;
+        padding: 20px 0px 5px 0px;
+        font-style: normal;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134813.scss b/.history/styles/components/block/FooterNav_20220531134813.scss
new file mode 100644
index 0000000..7446cda
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134813.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+ 
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134815.scss b/.history/styles/components/block/FooterNav_20220531134815.scss
new file mode 100644
index 0000000..6af986f
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134815.scss
@@ -0,0 +1,82 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+    .footer_nav .col ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134820.scss b/.history/styles/components/block/FooterNav_20220531134820.scss
new file mode 100644
index 0000000..6a53d3b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134820.scss
@@ -0,0 +1,82 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134823.scss b/.history/styles/components/block/FooterNav_20220531134823.scss
new file mode 100644
index 0000000..7b8981e
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134823.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134826.scss b/.history/styles/components/block/FooterNav_20220531134826.scss
new file mode 100644
index 0000000..ac811c5
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134826.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134829.scss b/.history/styles/components/block/FooterNav_20220531134829.scss
new file mode 100644
index 0000000..3208c64
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134829.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+    
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134830.scss b/.history/styles/components/block/FooterNav_20220531134830.scss
new file mode 100644
index 0000000..c5b20fa
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134830.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134831.scss b/.history/styles/components/block/FooterNav_20220531134831.scss
new file mode 100644
index 0000000..c5b20fa
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134831.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134838.scss b/.history/styles/components/block/FooterNav_20220531134838.scss
new file mode 100644
index 0000000..b7ba67d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134838.scss
@@ -0,0 +1,82 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134843.scss b/.history/styles/components/block/FooterNav_20220531134843.scss
new file mode 100644
index 0000000..bd2a027
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134843.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .col li {
+        list-style-type: none; 
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134847.scss b/.history/styles/components/block/FooterNav_20220531134847.scss
new file mode 100644
index 0000000..146636a
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134847.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .li {
+        list-style-type: none; 
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134858.scss b/.history/styles/components/block/FooterNav_20220531134858.scss
new file mode 100644
index 0000000..e1108d3
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134858.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .li {
+        list-style-type: none;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134928.scss b/.history/styles/components/block/FooterNav_20220531134928.scss
new file mode 100644
index 0000000..3b619e6
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134928.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+  
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134929.scss b/.history/styles/components/block/FooterNav_20220531134929.scss
new file mode 100644
index 0000000..aa06166
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134929.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134931.scss b/.history/styles/components/block/FooterNav_20220531134931.scss
new file mode 100644
index 0000000..e1108d3
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134931.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .li {
+        list-style-type: none;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134933.scss b/.history/styles/components/block/FooterNav_20220531134933.scss
new file mode 100644
index 0000000..a5b31a8
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134933.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+    
+        margin: 0;
+        padding: 0;
+    }
+
+    .li {
+        list-style-type: none;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134938.scss b/.history/styles/components/block/FooterNav_20220531134938.scss
new file mode 100644
index 0000000..ff56b79
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134938.scss
@@ -0,0 +1,87 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+    
+        margin: 0;
+        padding: 0;
+    }
+
+ 
+}
+.li {
+    list-style-type: none;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531134959.scss b/.history/styles/components/block/FooterNav_20220531134959.scss
new file mode 100644
index 0000000..1a20585
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531134959.scss
@@ -0,0 +1,86 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        margin: 0;
+        padding: 0;
+    }
+
+ 
+}
+.li {
+    list-style-type: none;
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135019.scss b/.history/styles/components/block/FooterNav_20220531135019.scss
new file mode 100644
index 0000000..201213d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135019.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+   
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135021.scss b/.history/styles/components/block/FooterNav_20220531135021.scss
new file mode 100644
index 0000000..c5b20fa
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135021.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135029.scss b/.history/styles/components/block/FooterNav_20220531135029.scss
new file mode 100644
index 0000000..721226d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135029.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    .p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135031.scss b/.history/styles/components/block/FooterNav_20220531135031.scss
new file mode 100644
index 0000000..3f89f17
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135031.scss
@@ -0,0 +1,84 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+    .col li {
+        list-style-type: none; 
+    }
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135040.scss b/.history/styles/components/block/FooterNav_20220531135040.scss
new file mode 100644
index 0000000..8aa8f10
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135040.scss
@@ -0,0 +1,82 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135041.scss b/.history/styles/components/block/FooterNav_20220531135041.scss
new file mode 100644
index 0000000..8aa8f10
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135041.scss
@@ -0,0 +1,82 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+    .footer_nav .col ul li {
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135053.scss b/.history/styles/components/block/FooterNav_20220531135053.scss
new file mode 100644
index 0000000..1aff9ee
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135053.scss
@@ -0,0 +1,78 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+    .footer_nav .col ul li {
+        
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135057.scss b/.history/styles/components/block/FooterNav_20220531135057.scss
new file mode 100644
index 0000000..250e40e
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135057.scss
@@ -0,0 +1,83 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        color: #000000;
+        
+       
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+    .footer_nav .col ul li {
+        
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135059.scss b/.history/styles/components/block/FooterNav_20220531135059.scss
new file mode 100644
index 0000000..e5ed5a1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135059.scss
@@ -0,0 +1,81 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+    .footer_nav .col ul li {
+        
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135103.scss b/.history/styles/components/block/FooterNav_20220531135103.scss
new file mode 100644
index 0000000..c905a57
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135103.scss
@@ -0,0 +1,80 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+    .footer_nav .col ul li {
+        
+    
+    
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135108.scss b/.history/styles/components/block/FooterNav_20220531135108.scss
new file mode 100644
index 0000000..44329dc
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135108.scss
@@ -0,0 +1,77 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+    }
+
+    .footer_nav ul li {
+        display: inline-block;
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135112.scss b/.history/styles/components/block/FooterNav_20220531135112.scss
new file mode 100644
index 0000000..214d20d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135112.scss
@@ -0,0 +1,77 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+    }
+
+    .footer_nav ul li {
+        
+     
+    }
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135114.scss b/.history/styles/components/block/FooterNav_20220531135114.scss
new file mode 100644
index 0000000..4d13190
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135114.scss
@@ -0,0 +1,74 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+    }
+
+
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135116.scss b/.history/styles/components/block/FooterNav_20220531135116.scss
new file mode 100644
index 0000000..15e9bde
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135116.scss
@@ -0,0 +1,72 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135120.scss b/.history/styles/components/block/FooterNav_20220531135120.scss
new file mode 100644
index 0000000..fb920b9
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135120.scss
@@ -0,0 +1,73 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+
+
+    .footer_nav .col ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135140.scss b/.history/styles/components/block/FooterNav_20220531135140.scss
new file mode 100644
index 0000000..be9ad81
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135140.scss
@@ -0,0 +1,73 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135142.scss b/.history/styles/components/block/FooterNav_20220531135142.scss
new file mode 100644
index 0000000..839d754
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135142.scss
@@ -0,0 +1,69 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+
+
+    
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135146.scss b/.history/styles/components/block/FooterNav_20220531135146.scss
new file mode 100644
index 0000000..b0a3212
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135146.scss
@@ -0,0 +1,75 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+
+
+
+    
+
+ 
+
+
+
+
+    
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135201.scss b/.history/styles/components/block/FooterNav_20220531135201.scss
new file mode 100644
index 0000000..90faa80
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135201.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135204.scss b/.history/styles/components/block/FooterNav_20220531135204.scss
new file mode 100644
index 0000000..90faa80
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135204.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135430.scss b/.history/styles/components/block/FooterNav_20220531135430.scss
new file mode 100644
index 0000000..02643e9
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135430.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135432.scss b/.history/styles/components/block/FooterNav_20220531135432.scss
new file mode 100644
index 0000000..7518f1b
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135432.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;8?
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135435.scss b/.history/styles/components/block/FooterNav_20220531135435.scss
new file mode 100644
index 0000000..333efb7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135435.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 14px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135448.scss b/.history/styles/components/block/FooterNav_20220531135448.scss
new file mode 100644
index 0000000..8b4dd34
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135448.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135505.scss b/.history/styles/components/block/FooterNav_20220531135505.scss
new file mode 100644
index 0000000..ba6bd44
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135505.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135508.scss b/.history/styles/components/block/FooterNav_20220531135508.scss
new file mode 100644
index 0000000..8b4dd34
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135508.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135516.scss b/.history/styles/components/block/FooterNav_20220531135516.scss
new file mode 100644
index 0000000..eb29510
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135516.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 4px 4px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135520.scss b/.history/styles/components/block/FooterNav_20220531135520.scss
new file mode 100644
index 0000000..80de8ed
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135520.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 4px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135555.scss b/.history/styles/components/block/FooterNav_20220531135555.scss
new file mode 100644
index 0000000..a39b891
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135555.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135614.scss b/.history/styles/components/block/FooterNav_20220531135614.scss
new file mode 100644
index 0000000..436458c
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135614.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 4px 0px 20px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135619.scss b/.history/styles/components/block/FooterNav_20220531135619.scss
new file mode 100644
index 0000000..8077eb5
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135619.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 20px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135627.scss b/.history/styles/components/block/FooterNav_20220531135627.scss
new file mode 100644
index 0000000..aa4b66c
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135627.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 0px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 20px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135633.scss b/.history/styles/components/block/FooterNav_20220531135633.scss
new file mode 100644
index 0000000..580b813
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135633.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 0px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 20px 20px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135636.scss b/.history/styles/components/block/FooterNav_20220531135636.scss
new file mode 100644
index 0000000..05621df
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135636.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 0px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 20px 0px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135656.scss b/.history/styles/components/block/FooterNav_20220531135656.scss
new file mode 100644
index 0000000..dfc75e1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135656.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 0px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 00px 0px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135657.scss b/.history/styles/components/block/FooterNav_20220531135657.scss
new file mode 100644
index 0000000..e4c0059
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135657.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 0px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 0px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135659.scss b/.history/styles/components/block/FooterNav_20220531135659.scss
new file mode 100644
index 0000000..aa4b66c
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135659.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 0px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 20px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135723.scss b/.history/styles/components/block/FooterNav_20220531135723.scss
new file mode 100644
index 0000000..8077eb5
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135723.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 20px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531135730.scss b/.history/styles/components/block/FooterNav_20220531135730.scss
new file mode 100644
index 0000000..27a268a
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531135730.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531141044.scss b/.history/styles/components/block/FooterNav_20220531141044.scss
new file mode 100644
index 0000000..421ea5f
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531141044.scss
@@ -0,0 +1,66 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143516.scss b/.history/styles/components/block/FooterNav_20220531143516.scss
new file mode 100644
index 0000000..fb4d940
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143516.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        ma
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143518.scss b/.history/styles/components/block/FooterNav_20220531143518.scss
new file mode 100644
index 0000000..9074e36
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143518.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 4px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143523.scss b/.history/styles/components/block/FooterNav_20220531143523.scss
new file mode 100644
index 0000000..0ca831e
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143523.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    width: 150px;
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143548.scss b/.history/styles/components/block/FooterNav_20220531143548.scss
new file mode 100644
index 0000000..7fabd9d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143548.scss
@@ -0,0 +1,66 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143552.scss b/.history/styles/components/block/FooterNav_20220531143552.scss
new file mode 100644
index 0000000..4c33afb
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143552.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    ma
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143555.scss b/.history/styles/components/block/FooterNav_20220531143555.scss
new file mode 100644
index 0000000..14155c4
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143555.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: ;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143557.scss b/.history/styles/components/block/FooterNav_20220531143557.scss
new file mode 100644
index 0000000..e6932ec
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143557.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 30px;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143601.scss b/.history/styles/components/block/FooterNav_20220531143601.scss
new file mode 100644
index 0000000..b97b652
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143601.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 30;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143603.scss b/.history/styles/components/block/FooterNav_20220531143603.scss
new file mode 100644
index 0000000..68f3c45
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143603.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 30%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143608.scss b/.history/styles/components/block/FooterNav_20220531143608.scss
new file mode 100644
index 0000000..dbfcbf7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143608.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143613.scss b/.history/styles/components/block/FooterNav_20220531143613.scss
new file mode 100644
index 0000000..dbfcbf7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143613.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143714.scss b/.history/styles/components/block/FooterNav_20220531143714.scss
new file mode 100644
index 0000000..351e45f
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143714.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143715.scss b/.history/styles/components/block/FooterNav_20220531143715.scss
new file mode 100644
index 0000000..351e45f
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143715.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143717.scss b/.history/styles/components/block/FooterNav_20220531143717.scss
new file mode 100644
index 0000000..dbfcbf7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143717.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143726.scss b/.history/styles/components/block/FooterNav_20220531143726.scss
new file mode 100644
index 0000000..9ff2bba
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143726.scss
@@ -0,0 +1,65 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+    
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143729.scss b/.history/styles/components/block/FooterNav_20220531143729.scss
new file mode 100644
index 0000000..dbfcbf7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143729.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143842.scss b/.history/styles/components/block/FooterNav_20220531143842.scss
new file mode 100644
index 0000000..654cb97
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143842.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143843.scss b/.history/styles/components/block/FooterNav_20220531143843.scss
new file mode 100644
index 0000000..0917d3d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143843.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        p{}
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143845.scss b/.history/styles/components/block/FooterNav_20220531143845.scss
new file mode 100644
index 0000000..86a03ff
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143845.scss
@@ -0,0 +1,70 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        p{
+            
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143847.scss b/.history/styles/components/block/FooterNav_20220531143847.scss
new file mode 100644
index 0000000..a83cfac
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143847.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143848.scss b/.history/styles/components/block/FooterNav_20220531143848.scss
new file mode 100644
index 0000000..7c12d1d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143848.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143850.scss b/.history/styles/components/block/FooterNav_20220531143850.scss
new file mode 100644
index 0000000..7c12d1d
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143850.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143854.scss b/.history/styles/components/block/FooterNav_20220531143854.scss
new file mode 100644
index 0000000..b316e00
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143854.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            fo
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143857.scss b/.history/styles/components/block/FooterNav_20220531143857.scss
new file mode 100644
index 0000000..5ba3ee1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143857.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            font-style: ;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143909.scss b/.history/styles/components/block/FooterNav_20220531143909.scss
new file mode 100644
index 0000000..5ba3ee1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143909.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            font-style: ;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143911.scss b/.history/styles/components/block/FooterNav_20220531143911.scss
new file mode 100644
index 0000000..4250f60
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143911.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            font-style: i;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143916.scss b/.history/styles/components/block/FooterNav_20220531143916.scss
new file mode 100644
index 0000000..6f55212
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143916.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        p{
+            font-style: italic;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143928.scss b/.history/styles/components/block/FooterNav_20220531143928.scss
new file mode 100644
index 0000000..6326c7a
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143928.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        {
+            font-style: italic;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143929.scss b/.history/styles/components/block/FooterNav_20220531143929.scss
new file mode 100644
index 0000000..943a560
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143929.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        h2{
+            font-style: italic;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531143954.scss b/.history/styles/components/block/FooterNav_20220531143954.scss
new file mode 100644
index 0000000..dbfcbf7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531143954.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531144906.scss b/.history/styles/components/block/FooterNav_20220531144906.scss
new file mode 100644
index 0000000..943a560
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531144906.scss
@@ -0,0 +1,71 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+        
+        h2{
+            font-style: italic;
+        }
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531144913.scss b/.history/styles/components/block/FooterNav_20220531144913.scss
new file mode 100644
index 0000000..dbfcbf7
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531144913.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531144920.scss b/.history/styles/components/block/FooterNav_20220531144920.scss
new file mode 100644
index 0000000..c04e352
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531144920.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        fo
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531144924.scss b/.history/styles/components/block/FooterNav_20220531144924.scss
new file mode 100644
index 0000000..94f4d82
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531144924.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-style: ;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531144926.scss b/.history/styles/components/block/FooterNav_20220531144926.scss
new file mode 100644
index 0000000..527e2bc
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531144926.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-style: b;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531144929.scss b/.history/styles/components/block/FooterNav_20220531144929.scss
new file mode 100644
index 0000000..308f023
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531144929.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-style: italic;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531145032.scss b/.history/styles/components/block/FooterNav_20220531145032.scss
new file mode 100644
index 0000000..d1cbacd
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531145032.scss
@@ -0,0 +1,68 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        padding: 0px 60px 20px 0px;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531145221.scss b/.history/styles/components/block/FooterNav_20220531145221.scss
new file mode 100644
index 0000000..1ede069
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531145221.scss
@@ -0,0 +1,67 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531145223.scss b/.history/styles/components/block/FooterNav_20220531145223.scss
new file mode 100644
index 0000000..e3e4bd6
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531145223.scss
@@ -0,0 +1,65 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        float: inline-end;
+        box-sizing: border-box;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531145231.scss b/.history/styles/components/block/FooterNav_20220531145231.scss
new file mode 100644
index 0000000..23e7dd2
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531145231.scss
@@ -0,0 +1,64 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+    .contain_left{
+       /* width: 50%; */
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531145237.scss b/.history/styles/components/block/FooterNav_20220531145237.scss
new file mode 100644
index 0000000..3c4c227
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531145237.scss
@@ -0,0 +1,61 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    .hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531145318.scss b/.history/styles/components/block/FooterNav_20220531145318.scss
new file mode 100644
index 0000000..07323ae
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531145318.scss
@@ -0,0 +1,61 @@
+.footer_nav {
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531151315.scss b/.history/styles/components/block/FooterNav_20220531151315.scss
new file mode 100644
index 0000000..58747f9
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531151315.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+    .
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531151320.scss b/.history/styles/components/block/FooterNav_20220531151320.scss
new file mode 100644
index 0000000..d019ff1
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531151320.scss
@@ -0,0 +1,63 @@
+.footer_nav {
+
+    .container_left{}
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531151322.scss b/.history/styles/components/block/FooterNav_20220531151322.scss
new file mode 100644
index 0000000..2c55462
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531151322.scss
@@ -0,0 +1,66 @@
+.footer_nav {
+
+    .container_left{
+        width: 100%;
+        margin: 10px;
+    }
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220531151324.scss b/.history/styles/components/block/FooterNav_20220531151324.scss
new file mode 100644
index 0000000..2c55462
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220531151324.scss
@@ -0,0 +1,66 @@
+.footer_nav {
+
+    .container_left{
+        width: 100%;
+        margin: 10px;
+    }
+
+.col {
+    height: auto;
+    margin-right: 10%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/FooterNav_20220616191019.scss b/.history/styles/components/block/FooterNav_20220616191019.scss
new file mode 100644
index 0000000..8b529a6
--- /dev/null
+++ b/.history/styles/components/block/FooterNav_20220616191019.scss
@@ -0,0 +1,66 @@
+.footer_nav {
+
+    .container_left{
+        width: 100%;
+        margin: 10px;
+    }
+
+.col {
+    height: auto;
+    margin-right: 4%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Footer_20220530193345.scss b/.history/styles/components/block/Footer_20220530193345.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/Footer_20220530193348.scss b/.history/styles/components/block/Footer_20220530193348.scss
new file mode 100644
index 0000000..6cab5f1
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220530193348.scss
@@ -0,0 +1,46 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+  }
+  
+.footer_link {
+    color: #ffff;
+  }
+
+.footer_block a:visited {
+    color: #ffff; /* Цвет посещенных ссылок */
+}
+.footer_block a:active {
+    color: #ffff; /* Цвет активных ссылок */
+}
+
+.footer_block {
+    float: left;
+    position: static;
+    display: flex;
+    height: 80px;
+    color: #ffff;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+   /* border: solid; */
+}
+
+.footer_feedback{
+    min-width: 375px;
+}
+
+.footer_compound{
+    width: calc(100% - 750px); 
+    min-width: 375px;
+}
+
+.footer_about {
+    min-width: 375px;
+}
+
diff --git a/.history/styles/components/block/Footer_20220530193351.scss b/.history/styles/components/block/Footer_20220530193351.scss
new file mode 100644
index 0000000..d9342b3
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220530193351.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+  }
+.footer_link {
+    color: #ffff;
+  }
+
+.footer_block a:visited {
+    color: #ffff; /* Цвет посещенных ссылок */
+}
+.footer_block a:active {
+    color: #ffff; /* Цвет активных ссылок */
+}
+
+.footer_block {
+    float: left;
+    position: static;
+    display: flex;
+    height: 80px;
+    color: #ffff;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+   /* border: solid; */
+}
+
+.footer_feedback{
+    min-width: 375px;
+}
+
+.footer_compound{
+    width: calc(100% - 750px); 
+    min-width: 375px;
+}
+
+.footer_about {
+    min-width: 375px;
+}
+
diff --git a/.history/styles/components/block/Footer_20220530193352.scss b/.history/styles/components/block/Footer_20220530193352.scss
new file mode 100644
index 0000000..15dd073
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220530193352.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+.footer_link {
+    color: #ffff;
+  }
+
+.footer_block a:visited {
+    color: #ffff; /* Цвет посещенных ссылок */
+}
+.footer_block a:active {
+    color: #ffff; /* Цвет активных ссылок */
+}
+
+.footer_block {
+    float: left;
+    position: static;
+    display: flex;
+    height: 80px;
+    color: #ffff;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+   /* border: solid; */
+}
+
+.footer_feedback{
+    min-width: 375px;
+}
+
+.footer_compound{
+    width: calc(100% - 750px); 
+    min-width: 375px;
+}
+
+.footer_about {
+    min-width: 375px;
+}
+
diff --git a/.history/styles/components/block/Footer_20220530193357.scss b/.history/styles/components/block/Footer_20220530193357.scss
new file mode 100644
index 0000000..0225d2c
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220530193357.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+    .footer_link {
+        color: #ffff;
+    }
+
+    .footer_block a:visited {
+        color: #ffff; /* Цвет посещенных ссылок */
+    }
+    .footer_block a:active {
+        color: #ffff; /* Цвет активных ссылок */
+    }
+
+    .footer_block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        color: #ffff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    /* border: solid; */
+    }
+
+    .footer_feedback{
+        min-width: 375px;
+    }
+
+    .footer_compound{
+        width: calc(100% - 750px); 
+        min-width: 375px;
+    }
+
+    .footer_about {
+        min-width: 375px;
+    }
+
diff --git a/.history/styles/components/block/Footer_20220530193359.scss b/.history/styles/components/block/Footer_20220530193359.scss
new file mode 100644
index 0000000..d61b3e7
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220530193359.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+    .footer_link {
+        color: #ffff;
+    }
+
+    .footer_block a:visited {
+        color: #ffff; /* Цвет посещенных ссылок */
+    }
+    .footer_block a:active {
+        color: #ffff; /* Цвет активных ссылок */
+    }
+
+    .footer_block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        color: #ffff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    /* border: solid; */
+    }
+
+    .footer_feedback{
+        min-width: 375px;
+    }
+
+    .footer_compound{
+        width: calc(100% - 750px); 
+        min-width: 375px;
+    }
+
+    .footer_about {
+        min-width: 375px;
+    }
+}
diff --git a/.history/styles/components/block/Footer_20220530193402.scss b/.history/styles/components/block/Footer_20220530193402.scss
new file mode 100644
index 0000000..72eefc0
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220530193402.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+    .footer_link {
+        color: #ffff;
+    }
+
+    .footer_block a:visited {
+        color: #ffff; /* Цвет посещенных ссылок */
+    }
+    .footer_block a:active {
+        color: #ffff; /* Цвет активных ссылок */
+    }
+
+    .footer_block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        color: #ffff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    /* border: solid; */
+    }
+
+    .footer_feedback{
+        min-width: 375px;
+    }
+
+    .footer_compound{
+        width: calc(100% - 750px);
+        min-width: 375px;
+    }
+
+    .footer_about {
+        min-width: 375px;
+    }
+}
diff --git a/.history/styles/components/block/Footer_20220531151822.scss b/.history/styles/components/block/Footer_20220531151822.scss
new file mode 100644
index 0000000..1d50a1f
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220531151822.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+    .footer_link {
+        color: #ffff;
+    }
+
+    .footer_block a:visited {
+        color: #ffff; /* Цвет посещенных ссылок */
+    }
+    .footer_block a:active {
+        color: #ffff; /* Цвет активных ссылок */
+    }
+
+    .footer_block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        color: #ffff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    /* border: solid; */
+    }
+
+    .footer_feedback{
+        min-width: 75px;
+    }
+
+    .footer_compound{
+        width: calc(100% - 750px);
+        min-width: 375px;
+    }
+
+    .footer_about {
+        min-width: 375px;
+    }
+}
diff --git a/.history/styles/components/block/Footer_20220531151905.scss b/.history/styles/components/block/Footer_20220531151905.scss
new file mode 100644
index 0000000..72eefc0
--- /dev/null
+++ b/.history/styles/components/block/Footer_20220531151905.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+    .footer_link {
+        color: #ffff;
+    }
+
+    .footer_block a:visited {
+        color: #ffff; /* Цвет посещенных ссылок */
+    }
+    .footer_block a:active {
+        color: #ffff; /* Цвет активных ссылок */
+    }
+
+    .footer_block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        color: #ffff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    /* border: solid; */
+    }
+
+    .footer_feedback{
+        min-width: 375px;
+    }
+
+    .footer_compound{
+        width: calc(100% - 750px);
+        min-width: 375px;
+    }
+
+    .footer_about {
+        min-width: 375px;
+    }
+}
diff --git a/.history/styles/components/block/Ingredients_20220616135653.scss b/.history/styles/components/block/Ingredients_20220616135653.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/Ingredients_20220616135701.scss b/.history/styles/components/block/Ingredients_20220616135701.scss
new file mode 100644
index 0000000..267e65a
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616135701.scss
@@ -0,0 +1,80 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+}
+
+.onion{
+    background: url('/img/onion.png') 100% 100% no-repeat;
+}
+
+.bacon{
+    background: url('/img/bacon.png') 100% 100% no-repeat;
+}
+
+.cheese{
+    background: url('/img/cheese.png') 100% 100% no-repeat;
+}
+
+.jalapeno{
+    background: url('/img/jalapeno.png') 100% 100% no-repeat;
+}
+
+.mushroom{
+    background: url('/img/mushroom.png') 100% 100% no-repeat;
+}
+
+.pickles{
+    background: url('/img/pickles.png') 100% 100% no-repeat;
+}
+
+.pineapple{
+    background: url('/img/pineapple.png') 100% 100% no-repeat;
+}
+
+.tomato{
+    background: url('/img/tomato.png') 100% 100% no-repeat;
+}
+
+.ingredients_img{
+    color: rgb(0, 0, 0);
+    height: 52px;
+    width: 52px;
+    margin: 0 auto;
+    border-radius: 50%;
+    background-color: #fff;
+}
+
+.ingredients_text_box{
+    border-radius: 30%;
+    height: 128px;
+}
+
+.ingredients_name{
+    color: rgb(0, 0, 0);
+    font-size: 12px;
+}
+
+.ingredients_price{
+    color: rgb(0, 0, 0);
+    font-size: 12px;
+}
+
+.ingredients_button{
+    background-color: #fff;
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    font-size: 24px;
+}
+
+.yellow{
+    background-color: $color_yellow;
+  }
+
+  .none{
+    background-color: #F5F1E1;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616135832.scss b/.history/styles/components/block/Ingredients_20220616135832.scss
new file mode 100644
index 0000000..b85e7f3
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616135832.scss
@@ -0,0 +1,80 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+
+    .onion{
+        background: url('/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616135906.scss b/.history/styles/components/block/Ingredients_20220616135906.scss
new file mode 100644
index 0000000..ed36c8b
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616135906.scss
@@ -0,0 +1,80 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616140750.scss b/.history/styles/components/block/Ingredients_20220616140750.scss
new file mode 100644
index 0000000..93f1312
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616140750.scss
@@ -0,0 +1,81 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616142241.scss b/.history/styles/components/block/Ingredients_20220616142241.scss
new file mode 100644
index 0000000..b4283a0
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616142241.scss
@@ -0,0 +1,85 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+.IngridientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616143504.scss b/.history/styles/components/block/Ingredients_20220616143504.scss
new file mode 100644
index 0000000..79fda51
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616143504.scss
@@ -0,0 +1,86 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngridientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616143515.scss b/.history/styles/components/block/Ingredients_20220616143515.scss
new file mode 100644
index 0000000..04a13fb
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616143515.scss
@@ -0,0 +1,86 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 10px 10px 10px auto;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616163905.scss b/.history/styles/components/block/Ingredients_20220616163905.scss
new file mode 100644
index 0000000..ea8e683
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616163905.scss
@@ -0,0 +1,86 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616191623.scss b/.history/styles/components/block/Ingredients_20220616191623.scss
new file mode 100644
index 0000000..91bcc1f
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616191623.scss
@@ -0,0 +1,91 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        border-radius: 50%;
+        display: inline-block;
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192024.scss b/.history/styles/components/block/Ingredients_20220616192024.scss
new file mode 100644
index 0000000..7d17f4a
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192024.scss
@@ -0,0 +1,90 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192122.scss b/.history/styles/components/block/Ingredients_20220616192122.scss
new file mode 100644
index 0000000..453cc75
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192122.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+        -webkit-border-radius: 50%;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192156.scss b/.history/styles/components/block/Ingredients_20220616192156.scss
new file mode 100644
index 0000000..62647dd
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192156.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192201.scss b/.history/styles/components/block/Ingredients_20220616192201.scss
new file mode 100644
index 0000000..7d55b0c
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192201.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192206.scss b/.history/styles/components/block/Ingredients_20220616192206.scss
new file mode 100644
index 0000000..6fa988b
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192206.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 18px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192211.scss b/.history/styles/components/block/Ingredients_20220616192211.scss
new file mode 100644
index 0000000..7d55b0c
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192211.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192214.scss b/.history/styles/components/block/Ingredients_20220616192214.scss
new file mode 100644
index 0000000..8195320
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192214.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        font-size: 4px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192218.scss b/.history/styles/components/block/Ingredients_20220616192218.scss
new file mode 100644
index 0000000..7d55b0c
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192218.scss
@@ -0,0 +1,92 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192243.scss b/.history/styles/components/block/Ingredients_20220616192243.scss
new file mode 100644
index 0000000..69ba2f3
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192243.scss
@@ -0,0 +1,93 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        -webkit-text-size-adjust: none;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192302.scss b/.history/styles/components/block/Ingredients_20220616192302.scss
new file mode 100644
index 0000000..21d1868
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192302.scss
@@ -0,0 +1,95 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+        font-size: 24px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192315.scss b/.history/styles/components/block/Ingredients_20220616192315.scss
new file mode 100644
index 0000000..cfc085a
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192315.scss
@@ -0,0 +1,93 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        font-size: 24px;
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192342.scss b/.history/styles/components/block/Ingredients_20220616192342.scss
new file mode 100644
index 0000000..e24ce3a
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192342.scss
@@ -0,0 +1,93 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        font-size: 4px;
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192348.scss b/.history/styles/components/block/Ingredients_20220616192348.scss
new file mode 100644
index 0000000..cfc085a
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192348.scss
@@ -0,0 +1,93 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        font-size: 24px;
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192415.scss b/.history/styles/components/block/Ingredients_20220616192415.scss
new file mode 100644
index 0000000..354cd7a
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192415.scss
@@ -0,0 +1,94 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        font-size: 24px;
+        text-size-adjust: 24px;
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192419.scss b/.history/styles/components/block/Ingredients_20220616192419.scss
new file mode 100644
index 0000000..39daedc
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192419.scss
@@ -0,0 +1,94 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+      
+        text-size-adjust: 24px;
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192428.scss b/.history/styles/components/block/Ingredients_20220616192428.scss
new file mode 100644
index 0000000..5030bd1
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192428.scss
@@ -0,0 +1,94 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+      
+        
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192435.scss b/.history/styles/components/block/Ingredients_20220616192435.scss
new file mode 100644
index 0000000..53946ee
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192435.scss
@@ -0,0 +1,93 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        font-size: 20px;
+        background-color: #fff;
+        display: inline-block;
+       
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        
+        width: 28px;
+        height: 28px;
+        
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192453.scss b/.history/styles/components/block/Ingredients_20220616192453.scss
new file mode 100644
index 0000000..f03326b
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192453.scss
@@ -0,0 +1,89 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616192612.scss b/.history/styles/components/block/Ingredients_20220616192612.scss
new file mode 100644
index 0000000..8c79bb6
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616192612.scss
@@ -0,0 +1,93 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616215542.scss b/.history/styles/components/block/Ingredients_20220616215542.scss
new file mode 100644
index 0000000..efb96df
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616215542.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png');
+    width:80px!important;
+  height:80px!important;
+  margin-right: auto !important;
+  margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616215609.scss b/.history/styles/components/block/Ingredients_20220616215609.scss
new file mode 100644
index 0000000..dfee672
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616215609.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        background-color: #fff;
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png');
+    width:23px!important;
+    height:23px!important;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616215625.scss b/.history/styles/components/block/Ingredients_20220616215625.scss
new file mode 100644
index 0000000..b632791
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616215625.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+       
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png');
+    width:23px!important;
+    height:23px!important;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616215649.scss b/.history/styles/components/block/Ingredients_20220616215649.scss
new file mode 100644
index 0000000..8fd57d5
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616215649.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+       
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') !important;
+    width:23px!important;
+    height:23px!important;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616220256.scss b/.history/styles/components/block/Ingredients_20220616220256.scss
new file mode 100644
index 0000000..4c8ab89
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616220256.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+       
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    width:23px!important;
+    height:23px!important;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616220814.scss b/.history/styles/components/block/Ingredients_20220616220814.scss
new file mode 100644
index 0000000..aea4d42
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616220814.scss
@@ -0,0 +1,102 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616220828.scss b/.history/styles/components/block/Ingredients_20220616220828.scss
new file mode 100644
index 0000000..812f8e9
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616220828.scss
@@ -0,0 +1,105 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+        background: url('/assets/img/minus.png') 0% no-repeat;
+        margin-right: auto !important;
+        margin-left: auto !important;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220616220944.scss b/.history/styles/components/block/Ingredients_20220616220944.scss
new file mode 100644
index 0000000..aea4d42
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220616220944.scss
@@ -0,0 +1,102 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 28px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220617110314.scss b/.history/styles/components/block/Ingredients_20220617110314.scss
new file mode 100644
index 0000000..ef52320
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220617110314.scss
@@ -0,0 +1,102 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4%;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220617110949.scss b/.history/styles/components/block/Ingredients_20220617110949.scss
new file mode 100644
index 0000000..e10a089
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220617110949.scss
@@ -0,0 +1,102 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 2% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220617111519.scss b/.history/styles/components/block/Ingredients_20220617111519.scss
new file mode 100644
index 0000000..6536ca9
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220617111519.scss
@@ -0,0 +1,103 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 2% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Ingredients_20220617111702.scss b/.history/styles/components/block/Ingredients_20220617111702.scss
new file mode 100644
index 0000000..cbc3864
--- /dev/null
+++ b/.history/styles/components/block/Ingredients_20220617111702.scss
@@ -0,0 +1,103 @@
+$color_yellow: #FED11E;
+
+.ingredients_box{
+    text-align: center;
+    width: 82px;
+    height: 128px;
+    margin: 4px 1% 4px 10px;
+
+    .onion{
+        background: url('/assets/img/onion.png') 100% 100% no-repeat;
+    }
+
+    .bacon{
+        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+    }
+
+    .cheese{
+        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+    }
+
+    .jalapeno{
+        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+    }
+
+    .mushroom{
+        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+    }
+
+    .pickles{
+        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+    }
+
+    .pineapple{
+        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+    }
+
+    .tomato{
+        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+    }
+
+    .ingredients_img{
+        color: rgb(0, 0, 0);
+        height: 52px;
+        width: 52px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .ingredients_text_box{
+        border-radius: 30%;
+        height: 128px;
+    }
+
+    .ingredients_name{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_price{
+        color: rgb(0, 0, 0);
+        font-size: 12px;
+    }
+
+    .ingredients_button{
+        display: inline-block;
+        -webkit-border-radius: 12px;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        -khtml-border-radius: 50%;;
+        width: 28px;
+        height: 25px;
+        margin-top: 10px;
+        border: aliceblue;
+    }
+
+    .yellow{
+        background-color: $color_yellow;
+    }
+
+    .none{
+        background-color: #F5F1E1;
+    }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+}
+
+.IngredientsBox{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Motto_20220529152901.scss b/.history/styles/components/block/Motto_20220529152901.scss
new file mode 100644
index 0000000..d0a167a
--- /dev/null
+++ b/.history/styles/components/block/Motto_20220529152901.scss
@@ -0,0 +1,54 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: grid;
+}
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/block/Motto_20220617163219.scss b/.history/styles/components/block/Motto_20220617163219.scss
new file mode 100644
index 0000000..30dd529
--- /dev/null
+++ b/.history/styles/components/block/Motto_20220617163219.scss
@@ -0,0 +1,60 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: grid;
+}
+
+@media (max-width: 940px) {
+    .title_header {
+        display: flex;
+    }
+  }
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/block/Motto_20220617163236.scss b/.history/styles/components/block/Motto_20220617163236.scss
new file mode 100644
index 0000000..5e08907
--- /dev/null
+++ b/.history/styles/components/block/Motto_20220617163236.scss
@@ -0,0 +1,60 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: grid;
+}
+
+@media (max-width: 940px) {
+    .title_header {
+        display: grid;
+    }
+  }
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/block/Motto_20220617163245.scss b/.history/styles/components/block/Motto_20220617163245.scss
new file mode 100644
index 0000000..f110065
--- /dev/null
+++ b/.history/styles/components/block/Motto_20220617163245.scss
@@ -0,0 +1,60 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: flex;
+}
+
+@media (max-width: 940px) {
+    .title_header {
+        display: grid;
+    }
+  }
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/.history/styles/components/block/PizzaCard_20220603175515.scss b/.history/styles/components/block/PizzaCard_20220603175515.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/PizzaCard_20220603175522.scss b/.history/styles/components/block/PizzaCard_20220603175522.scss
new file mode 100644
index 0000000..0fdd4f7
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220603175522.scss
@@ -0,0 +1,31 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
diff --git a/.history/styles/components/block/PizzaCard_20220603175531.scss b/.history/styles/components/block/PizzaCard_20220603175531.scss
new file mode 100644
index 0000000..7387f45
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220603175531.scss
@@ -0,0 +1,31 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615043759.scss b/.history/styles/components/block/PizzaCard_20220615043759.scss
new file mode 100644
index 0000000..7a5e0ad
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615043759.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+          padding: 8px;
+          flex: 1;
+          cursor: pointer;
+          font-weight: 600;
+          font-size: 14px;
+          @include noselect();
+          &.active {
+            background: #ffffff;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+
+    &__bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20px;
+    }
+
+    &__price {
+      font-weight: bold;
+      font-size: 22px;
+      line-height: 27px;
+      letter-spacing: 0.015em;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615043815.scss b/.history/styles/components/block/PizzaCard_20220615043815.scss
new file mode 100644
index 0000000..77e100a
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615043815.scss
@@ -0,0 +1,98 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+          padding: 8px;
+          flex: 1;
+          cursor: pointer;
+          font-weight: 600;
+          font-size: 14px;
+          &.active {
+            background: #ffffff;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+
+    &__bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20px;
+    }
+
+    &__price {
+      font-weight: bold;
+      font-size: 22px;
+      line-height: 27px;
+      letter-spacing: 0.015em;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044248.scss b/.history/styles/components/block/PizzaCard_20220615044248.scss
new file mode 100644
index 0000000..9c28605
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044248.scss
@@ -0,0 +1,84 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+          padding: 8px;
+          flex: 1;
+          cursor: pointer;
+          font-weight: 600;
+          font-size: 14px;
+          &.active {
+            background: #ffffff;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044433.scss b/.history/styles/components/block/PizzaCard_20220615044433.scss
new file mode 100644
index 0000000..2c32eba
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044433.scss
@@ -0,0 +1,91 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #ffffff;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044547.scss b/.history/styles/components/block/PizzaCard_20220615044547.scss
new file mode 100644
index 0000000..0b1c6d1
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044547.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #ffffff;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044654.scss b/.history/styles/components/block/PizzaCard_20220615044654.scss
new file mode 100644
index 0000000..d00b8c5
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044654.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #ffffff;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044813.scss b/.history/styles/components/block/PizzaCard_20220615044813.scss
new file mode 100644
index 0000000..13a6319
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044813.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044910.scss b/.history/styles/components/block/PizzaCard_20220615044910.scss
new file mode 100644
index 0000000..8a6d669
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044910.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 80px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      background-color: #f3f3f3;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615044933.scss b/.history/styles/components/block/PizzaCard_20220615044933.scss
new file mode 100644
index 0000000..8f59c86
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615044933.scss
@@ -0,0 +1,91 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      border-radius: 10px;
+      flex-direction: column;
+      padding: 6px;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045021.scss b/.history/styles/components/block/PizzaCard_20220615045021.scss
new file mode 100644
index 0000000..14ff1bd
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045021.scss
@@ -0,0 +1,90 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    width: 280px;
+    text-align: center;
+    margin-bottom: 65px;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      border-radius: 10px;
+      flex-direction: column;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045307.scss b/.history/styles/components/block/PizzaCard_20220615045307.scss
new file mode 100644
index 0000000..64fac40
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045307.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      border-radius: 10px;
+      flex-direction: column;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045317.scss b/.history/styles/components/block/PizzaCard_20220615045317.scss
new file mode 100644
index 0000000..64fac40
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045317.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__image {
+      width: 260px;
+    }
+
+    &__title {
+      font-size: 20px;
+      font-weight: 900;
+      letter-spacing: 1%;
+      margin-bottom: 20px;
+    }
+
+    &__selector {
+      display: flex;
+      border-radius: 10px;
+      flex-direction: column;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045538.scss b/.history/styles/components/block/PizzaCard_20220615045538.scss
new file mode 100644
index 0000000..fb1c633
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045538.scss
@@ -0,0 +1,76 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+      display: flex;
+      border-radius: 10px;
+      flex-direction: column;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045549.scss b/.history/styles/components/block/PizzaCard_20220615045549.scss
new file mode 100644
index 0000000..1a07f40
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045549.scss
@@ -0,0 +1,86 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045903.scss b/.history/styles/components/block/PizzaCard_20220615045903.scss
new file mode 100644
index 0000000..82cbd15
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045903.scss
@@ -0,0 +1,94 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        content: " ";
+  display: block;
+  position: absolute;
+  top: -1px;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  transform: translate3d(-103%, 0, 0);
+  transition: all 250ms;
+
+  color: #fff;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615045913.scss b/.history/styles/components/block/PizzaCard_20220615045913.scss
new file mode 100644
index 0000000..1a07f40
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615045913.scss
@@ -0,0 +1,86 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050028.scss b/.history/styles/components/block/PizzaCard_20220615050028.scss
new file mode 100644
index 0000000..338aceb
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050028.scss
@@ -0,0 +1,87 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+        border-radius: 12px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050102.scss b/.history/styles/components/block/PizzaCard_20220615050102.scss
new file mode 100644
index 0000000..c7ee3a6
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050102.scss
@@ -0,0 +1,87 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                        supported by Chrome, Opera and Firefox */
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050111.scss b/.history/styles/components/block/PizzaCard_20220615050111.scss
new file mode 100644
index 0000000..38e5152
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050111.scss
@@ -0,0 +1,91 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 22px;
+            -webkit-touch-callout: none;
+            /*iOSSafari*/-webkit-user-select: none;
+            /*Safari*/-khtml-user-select: none;
+            /*KonquerorHTML*/-moz-user-select: none;
+            /*OldversionsofFirefox*/-ms-user-select: none;
+            /*InternetExplorer/Edge*/user-select: none;
+            /*Non-prefixedversion,currentlysupportedbyChrome,OperaandFirefox*/&.active:;
+            -webkit-border-radius: 22px;
+            -moz-border-radius: 22px;
+            -ms-border-radius: 22px;
+            -o-border-radius: 22px;
+{
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050159.scss b/.history/styles/components/block/PizzaCard_20220615050159.scss
new file mode 100644
index 0000000..4a2e9ae
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050159.scss
@@ -0,0 +1,81 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050219.scss b/.history/styles/components/block/PizzaCard_20220615050219.scss
new file mode 100644
index 0000000..4a2e9ae
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050219.scss
@@ -0,0 +1,81 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            border-radius: 5px;
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050226.scss b/.history/styles/components/block/PizzaCard_20220615050226.scss
new file mode 100644
index 0000000..586b054
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050226.scss
@@ -0,0 +1,80 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050258.scss b/.history/styles/components/block/PizzaCard_20220615050258.scss
new file mode 100644
index 0000000..d93d32b
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050258.scss
@@ -0,0 +1,80 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        display: table-cell;
+        height: 30px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050322.scss b/.history/styles/components/block/PizzaCard_20220615050322.scss
new file mode 100644
index 0000000..38feb6d
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050322.scss
@@ -0,0 +1,73 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050335.scss b/.history/styles/components/block/PizzaCard_20220615050335.scss
new file mode 100644
index 0000000..5583739
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050335.scss
@@ -0,0 +1,82 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+        height: 26px;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        padding-left: 8px;
+        padding-right: 8px;
+        border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615050507.scss b/.history/styles/components/block/PizzaCard_20220615050507.scss
new file mode 100644
index 0000000..a424fff
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615050507.scss
@@ -0,0 +1,82 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 26px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615051018.scss b/.history/styles/components/block/PizzaCard_20220615051018.scss
new file mode 100644
index 0000000..067e76b
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615051018.scss
@@ -0,0 +1,80 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 26px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615051024.scss b/.history/styles/components/block/PizzaCard_20220615051024.scss
new file mode 100644
index 0000000..689c382
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615051024.scss
@@ -0,0 +1,81 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 8px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 26px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615051142.scss b/.history/styles/components/block/PizzaCard_20220615051142.scss
new file mode 100644
index 0000000..7367aca
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615051142.scss
@@ -0,0 +1,81 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            flex: 1;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 26px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615051216.scss b/.history/styles/components/block/PizzaCard_20220615051216.scss
new file mode 100644
index 0000000..7bff5d4
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615051216.scss
@@ -0,0 +1,80 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 26px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615051346.scss b/.history/styles/components/block/PizzaCard_20220615051346.scss
new file mode 100644
index 0000000..e657f41
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615051346.scss
@@ -0,0 +1,78 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 26px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615051714.scss b/.history/styles/components/block/PizzaCard_20220615051714.scss
new file mode 100644
index 0000000..c7fb0d6
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615051714.scss
@@ -0,0 +1,82 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+        
+        &_size{
+            height: 32px;
+        }
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615052855.scss b/.history/styles/components/block/PizzaCard_20220615052855.scss
new file mode 100644
index 0000000..e20cfd0
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615052855.scss
@@ -0,0 +1,82 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &.size{
+            height: 32px;
+        }
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615053116.scss b/.history/styles/components/block/PizzaCard_20220615053116.scss
new file mode 100644
index 0000000..eb2e08c
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615053116.scss
@@ -0,0 +1,83 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &.size{
+            width: 60px;
+            height: 32px;
+        }
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615053323.scss b/.history/styles/components/block/PizzaCard_20220615053323.scss
new file mode 100644
index 0000000..7b04063
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615053323.scss
@@ -0,0 +1,93 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &.size{
+            width: 60px;
+            height: 32px;
+            border-radius: 8px;
+        }
+        &.type{
+            width: 60px;
+            height: 32px;
+            border-radius: 12px;
+            -webkit-border-radius: 12px;
+            -moz-border-radius: 12px;
+            -ms-border-radius: 12px;
+            -o-border-radius: 12px;
+}
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            border-radius: 12px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+          &.active {
+            background: #FED11E;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+            cursor: auto;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615053551.scss b/.history/styles/components/block/PizzaCard_20220615053551.scss
new file mode 100644
index 0000000..b018a29
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615053551.scss
@@ -0,0 +1,93 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 60px;
+                height: 32px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615053709.scss b/.history/styles/components/block/PizzaCard_20220615053709.scss
new file mode 100644
index 0000000..a75e4ae
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615053709.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 60px;
+                height: 32px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615053801.scss b/.history/styles/components/block/PizzaCard_20220615053801.scss
new file mode 100644
index 0000000..db27a7c
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615053801.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        list-style-type: none;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615054044.scss b/.history/styles/components/block/PizzaCard_20220615054044.scss
new file mode 100644
index 0000000..9e7a764
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615054044.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615054109.scss b/.history/styles/components/block/PizzaCard_20220615054109.scss
new file mode 100644
index 0000000..884d700
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615054109.scss
@@ -0,0 +1,91 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220615054706.scss b/.history/styles/components/block/PizzaCard_20220615054706.scss
new file mode 100644
index 0000000..ba6954f
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220615054706.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -35px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616141810.scss b/.history/styles/components/block/PizzaCard_20220616141810.scss
new file mode 100644
index 0000000..e56d998
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616141810.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 580px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -35px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616142027.scss b/.history/styles/components/block/PizzaCard_20220616142027.scss
new file mode 100644
index 0000000..ba6954f
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616142027.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -35px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616143002.scss b/.history/styles/components/block/PizzaCard_20220616143002.scss
new file mode 100644
index 0000000..ab62fc0
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616143002.scss
@@ -0,0 +1,92 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616161813.scss b/.history/styles/components/block/PizzaCard_20220616161813.scss
new file mode 100644
index 0000000..15a33b0
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616161813.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 940px) {
+    .modal_product {
+      height: 955px;
+      width: 400;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616161838.scss b/.history/styles/components/block/PizzaCard_20220616161838.scss
new file mode 100644
index 0000000..b3c8844
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616161838.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 940px) {
+    .modal_product {
+      height: 955px;
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616162043.scss b/.history/styles/components/block/PizzaCard_20220616162043.scss
new file mode 100644
index 0000000..9faafac
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616162043.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (device-width: 940px) {
+    .modal_product {
+      height: 955px;
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616162152.scss b/.history/styles/components/block/PizzaCard_20220616162152.scss
new file mode 100644
index 0000000..f24c8e0
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616162152.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (device-width: <940px) {
+    .modal_product {
+      height: 955px;
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616162303.scss b/.history/styles/components/block/PizzaCard_20220616162303.scss
new file mode 100644
index 0000000..d25b16f
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616162303.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 955px;
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616162331.scss b/.history/styles/components/block/PizzaCard_20220616162331.scss
new file mode 100644
index 0000000..927a3f3
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616162331.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1005px;
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616162336.scss b/.history/styles/components/block/PizzaCard_20220616162336.scss
new file mode 100644
index 0000000..383754e
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616162336.scss
@@ -0,0 +1,99 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163058.scss b/.history/styles/components/block/PizzaCard_20220616163058.scss
new file mode 100644
index 0000000..73d761f
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163058.scss
@@ -0,0 +1,104 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163234.scss b/.history/styles/components/block/PizzaCard_20220616163234.scss
new file mode 100644
index 0000000..ca20739
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163234.scss
@@ -0,0 +1,112 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163250.scss b/.history/styles/components/block/PizzaCard_20220616163250.scss
new file mode 100644
index 0000000..a106b19
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163250.scss
@@ -0,0 +1,112 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      display: flex;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163304.scss b/.history/styles/components/block/PizzaCard_20220616163304.scss
new file mode 100644
index 0000000..05c6ef4
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163304.scss
@@ -0,0 +1,112 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163313.scss b/.history/styles/components/block/PizzaCard_20220616163313.scss
new file mode 100644
index 0000000..ca20739
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163313.scss
@@ -0,0 +1,112 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163316.scss b/.history/styles/components/block/PizzaCard_20220616163316.scss
new file mode 100644
index 0000000..d5f48a0
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163316.scss
@@ -0,0 +1,113 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616163731.scss b/.history/styles/components/block/PizzaCard_20220616163731.scss
new file mode 100644
index 0000000..86f8296
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616163731.scss
@@ -0,0 +1,113 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220616191205.scss b/.history/styles/components/block/PizzaCard_20220616191205.scss
new file mode 100644
index 0000000..f9fc69c
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220616191205.scss
@@ -0,0 +1,114 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220617112736.scss b/.history/styles/components/block/PizzaCard_20220617112736.scss
new file mode 100644
index 0000000..82cfe7f
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220617112736.scss
@@ -0,0 +1,117 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220617112819.scss b/.history/styles/components/block/PizzaCard_20220617112819.scss
new file mode 100644
index 0000000..62c2f1d
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220617112819.scss
@@ -0,0 +1,117 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+    padding-top: 100px;
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220618084530.scss b/.history/styles/components/block/PizzaCard_20220618084530.scss
new file mode 100644
index 0000000..2d6cd6c
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220618084530.scss
@@ -0,0 +1,117 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+   /* padding-top: 100px; */
+    margin: 0 auto;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220618084848.scss b/.history/styles/components/block/PizzaCard_20220618084848.scss
new file mode 100644
index 0000000..b4d7d8a
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220618084848.scss
@@ -0,0 +1,119 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+   /* padding-top: 100px; */
+   right: 0;
+   left: unset !important;
+   position: absolute;
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCard_20220618102309.scss b/.history/styles/components/block/PizzaCard_20220618102309.scss
new file mode 100644
index 0000000..7786f8b
--- /dev/null
+++ b/.history/styles/components/block/PizzaCard_20220618102309.scss
@@ -0,0 +1,119 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCart_20220618102308.scss b/.history/styles/components/block/PizzaCart_20220618102308.scss
new file mode 100644
index 0000000..7786f8b
--- /dev/null
+++ b/.history/styles/components/block/PizzaCart_20220618102308.scss
@@ -0,0 +1,119 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/PizzaCart_20220618104326.scss b/.history/styles/components/block/PizzaCart_20220618104326.scss
new file mode 100644
index 0000000..ce39d2d
--- /dev/null
+++ b/.history/styles/components/block/PizzaCart_20220618104326.scss
@@ -0,0 +1,120 @@
+.modal_product{
+    height: 533px;
+    width: 900px;
+  }
+
+.modal_body_left{
+    margin: 0 auto;
+    float: left;
+    position: static;
+    display: flex;
+    justify-content: center; /*Центрирование по горизонтали*/
+    align-items: center;     /*Центрирование по вертикали */
+    width: 400px;
+}
+
+.modal_body_right{
+    background: #F7F7F7;
+    width: 450px;
+    display: table;
+    float: left;
+    position: static;
+}
+
+.modal_header{
+    height: 450px;
+}
+
+.position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+}
+
+.pizza-block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &__selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 940px) {
+    .modal_product {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .position_product{
+        padding-top: 5px;
+    }
+  }
+
+
+  .vendor-list_ul_modal {
+    padding-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list_ul_modal {
+      padding-top: 8px;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220530180958.scss b/.history/styles/components/block/Pizza_20220530180958.scss
new file mode 100644
index 0000000..11314c6
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220530180958.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 400px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220530181203.scss b/.history/styles/components/block/Pizza_20220530181203.scss
new file mode 100644
index 0000000..93af26d
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220530181203.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220530181410.scss b/.history/styles/components/block/Pizza_20220530181410.scss
new file mode 100644
index 0000000..1be679b
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220530181410.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #771515;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220530181411.scss b/.history/styles/components/block/Pizza_20220530181411.scss
new file mode 100644
index 0000000..1be679b
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220530181411.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #771515;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220530181536.scss b/.history/styles/components/block/Pizza_20220530181536.scss
new file mode 100644
index 0000000..93af26d
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220530181536.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220530181537.scss b/.history/styles/components/block/Pizza_20220530181537.scss
new file mode 100644
index 0000000..93af26d
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220530181537.scss
@@ -0,0 +1,54 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531155859.scss b/.history/styles/components/block/Pizza_20220531155859.scss
new file mode 100644
index 0000000..69f68d8
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531155859.scss
@@ -0,0 +1,128 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+    .vendor-item__link {
+      transition: 0.2s;
+      box-shadow: 0 7px 20px -8px rgba(157, 157, 163, 0.1);
+    }
+    .vendor-item__images {
+      min-height: 114px;
+    }
+    .vendor-item__cover,
+    .vendor-item__wrap {
+      transition: 0.2s;
+    }
+    .vendor-item__row {
+      margin-top: 12px;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-item.is-closed .vendor-fave__btn.is-active {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .vendor-item.is-closed:hover .vendor-item__cover {
+      filter: opacity(0.6) grayscale(0);
+    }
+    .vendor-item.is-closed:hover .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-fave__btn {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s;
+    }
+    .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531155906.scss b/.history/styles/components/block/Pizza_20220531155906.scss
new file mode 100644
index 0000000..69f68d8
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531155906.scss
@@ -0,0 +1,128 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+    .vendor-item__link {
+      transition: 0.2s;
+      box-shadow: 0 7px 20px -8px rgba(157, 157, 163, 0.1);
+    }
+    .vendor-item__images {
+      min-height: 114px;
+    }
+    .vendor-item__cover,
+    .vendor-item__wrap {
+      transition: 0.2s;
+    }
+    .vendor-item__row {
+      margin-top: 12px;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-item.is-closed .vendor-fave__btn.is-active {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .vendor-item.is-closed:hover .vendor-item__cover {
+      filter: opacity(0.6) grayscale(0);
+    }
+    .vendor-item.is-closed:hover .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-fave__btn {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s;
+    }
+    .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160035.scss b/.history/styles/components/block/Pizza_20220531160035.scss
new file mode 100644
index 0000000..4bd22a3
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160035.scss
@@ -0,0 +1,122 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+
+    .vendor-item__cover,
+    .vendor-item__wrap {
+      transition: 0.2s;
+    }
+    .vendor-item__row {
+      margin-top: 12px;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-item.is-closed .vendor-fave__btn.is-active {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .vendor-item.is-closed:hover .vendor-item__cover {
+      filter: opacity(0.6) grayscale(0);
+    }
+    .vendor-item.is-closed:hover .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-fave__btn {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s;
+    }
+    .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160041.scss b/.history/styles/components/block/Pizza_20220531160041.scss
new file mode 100644
index 0000000..706a0c9
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160041.scss
@@ -0,0 +1,114 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-item.is-closed .vendor-fave__btn.is-active {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .vendor-item.is-closed:hover .vendor-item__cover {
+      filter: opacity(0.6) grayscale(0);
+    }
+    .vendor-item.is-closed:hover .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-fave__btn {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s;
+    }
+    .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160042.scss b/.history/styles/components/block/Pizza_20220531160042.scss
new file mode 100644
index 0000000..706a0c9
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160042.scss
@@ -0,0 +1,114 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-item.is-closed .vendor-fave__btn.is-active {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .vendor-item.is-closed:hover .vendor-item__cover {
+      filter: opacity(0.6) grayscale(0);
+    }
+    .vendor-item.is-closed:hover .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .vendor-fave__btn {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s;
+    }
+    .vendor-fave__btn.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160107.scss b/.history/styles/components/block/Pizza_20220531160107.scss
new file mode 100644
index 0000000..7051fa2
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160107.scss
@@ -0,0 +1,94 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160108.scss b/.history/styles/components/block/Pizza_20220531160108.scss
new file mode 100644
index 0000000..7051fa2
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160108.scss
@@ -0,0 +1,94 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160133.scss b/.history/styles/components/block/Pizza_20220531160133.scss
new file mode 100644
index 0000000..935a73a
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160133.scss
@@ -0,0 +1,95 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160136.scss b/.history/styles/components/block/Pizza_20220531160136.scss
new file mode 100644
index 0000000..e673749
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160136.scss
@@ -0,0 +1,96 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+  
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160137.scss b/.history/styles/components/block/Pizza_20220531160137.scss
new file mode 100644
index 0000000..1c99986
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160137.scss
@@ -0,0 +1,96 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160139.scss b/.history/styles/components/block/Pizza_20220531160139.scss
new file mode 100644
index 0000000..7d14cbd
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160139.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220531160147.scss b/.history/styles/components/block/Pizza_20220531160147.scss
new file mode 100644
index 0000000..7d14cbd
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220531160147.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220616190627.scss b/.history/styles/components/block/Pizza_20220616190627.scss
new file mode 100644
index 0000000..155eae0
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220616190627.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1040px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220616190636.scss b/.history/styles/components/block/Pizza_20220616190636.scss
new file mode 100644
index 0000000..b00cfa3
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220616190636.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220616190708.scss b/.history/styles/components/block/Pizza_20220616190708.scss
new file mode 100644
index 0000000..8c85ddb
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220616190708.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220616190818.scss b/.history/styles/components/block/Pizza_20220616190818.scss
new file mode 100644
index 0000000..4676bea
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220616190818.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+     /* margin: 0 20px 20px 0; */
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220617220120.scss b/.history/styles/components/block/Pizza_20220617220120.scss
new file mode 100644
index 0000000..8c85ddb
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220617220120.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 370px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220617220200.scss b/.history/styles/components/block/Pizza_20220617220200.scss
new file mode 100644
index 0000000..c00411b
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220617220200.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 390px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+      width: 100%;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220617220209.scss b/.history/styles/components/block/Pizza_20220617220209.scss
new file mode 100644
index 0000000..2dda53c
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220617220209.scss
@@ -0,0 +1,97 @@
+.product_card{
+    /*  width: 100vw; */
+      height: 390px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+    /*  margin-left: 30px;
+      margin-top: 10px;
+      margin-bottom: 20px;*/
+      padding: 20px;
+      transition: all 0.2s ease;
+  
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220617220219.scss b/.history/styles/components/block/Pizza_20220617220219.scss
new file mode 100644
index 0000000..9cf5e8c
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220617220219.scss
@@ -0,0 +1,93 @@
+.product_card{
+      height: 390px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+      padding: 20px;
+      transition: all 0.2s ease;
+  
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220617220309.scss b/.history/styles/components/block/Pizza_20220617220309.scss
new file mode 100644
index 0000000..d143a94
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220617220309.scss
@@ -0,0 +1,93 @@
+.product_card{
+      height: 605px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+      padding: 20px;
+      transition: all 0.2s ease;
+  
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220617220326.scss b/.history/styles/components/block/Pizza_20220617220326.scss
new file mode 100644
index 0000000..6a42ec7
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220617220326.scss
@@ -0,0 +1,93 @@
+.product_card{
+      height: 630px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+      padding: 20px;
+      transition: all 0.2s ease;
+  
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220618063013.scss b/.history/styles/components/block/Pizza_20220618063013.scss
new file mode 100644
index 0000000..55a73cb
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220618063013.scss
@@ -0,0 +1,92 @@
+.product_card{
+      height: 630px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+      padding: 20px;
+      transition: all 0.2s ease;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+      margin: 0 20px 20px 0;
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220618145015.scss b/.history/styles/components/block/Pizza_20220618145015.scss
new file mode 100644
index 0000000..f7b4fc1
--- /dev/null
+++ b/.history/styles/components/block/Pizza_20220618145015.scss
@@ -0,0 +1,92 @@
+.product_card{
+      height: 630px;
+      display: table;
+      float: left;
+      position: static;
+      text-align: center;
+      border:1px solid hsl(0, 0%, 100%);
+      padding: 20px;
+      transition: all 0.2s ease;
+  }
+
+  .product_card:hover {
+    border:1px solid #d6d6d6;
+    filter:blur(0px);
+    opacity:1;
+    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+  }
+
+  .pictureText_text{
+      display: block;
+      text-align: left;
+  }
+
+  .product_card_img{
+      text-align: center;
+  }
+
+  .product_card_box{
+      /*width: 256px; */
+      text-align: left;
+  }
+
+  .product_card_footer{
+      display: table;
+      width: 100%;
+  }
+
+  .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+  }
+
+  .product_card_video{
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-item {
+     /* margin: 0 20px 20px 0; */
+      box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+    }
+    .vendor-item:hover .vendor-item__link {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 4 - (20px * 3 / 4));
+    }
+    .vendor-item:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+    .vendor-item {
+      width: calc(100% / 2 - (20px * 2 / 3));
+    }
+    .vendor-item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  @media (min-width: 640px) and (min-width: 768px) {
+    .vendor-item {
+      transition: 0.2s;
+    }
+    .vendor-item:hover {
+      margin-top: -4px;
+      margin-bottom: 24px;
+    }
+    .vendor-item:hover .vendor-fave__btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
\ No newline at end of file
diff --git a/.history/styles/components/block/Pizza_20220618175438.scss b/.history/styles/components/block/Pizza_20220618175438.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/block/Stock_20220518142236.scss b/.history/styles/components/block/Stock_20220518142236.scss
new file mode 100644
index 0000000..823ffdb
--- /dev/null
+++ b/.history/styles/components/block/Stock_20220518142236.scss
@@ -0,0 +1,104 @@
+@import '../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+        z-index: 100;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Stock_20220530181135.scss b/.history/styles/components/block/Stock_20220530181135.scss
new file mode 100644
index 0000000..164ca2f
--- /dev/null
+++ b/.history/styles/components/block/Stock_20220530181135.scss
@@ -0,0 +1,104 @@
+@import '....//libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+        z-index: 100;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/block/Stock_20220530181137.scss b/.history/styles/components/block/Stock_20220530181137.scss
new file mode 100644
index 0000000..8d6b084
--- /dev/null
+++ b/.history/styles/components/block/Stock_20220530181137.scss
@@ -0,0 +1,104 @@
+@import '../../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+        z-index: 100;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/.history/styles/components/container/ContainerTitle_20220530191331.scss b/.history/styles/components/container/ContainerTitle_20220530191331.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/styles/components/container/ContainerTitle_20220530191336.scss b/.history/styles/components/container/ContainerTitle_20220530191336.scss
new file mode 100644
index 0000000..e81749e
--- /dev/null
+++ b/.history/styles/components/container/ContainerTitle_20220530191336.scss
@@ -0,0 +1,39 @@
+.container_main {
+    width: 100%;
+    padding: 20px;
+}
+
+.container_title {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 47px;
+    color: #051244;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    margin: 30px 0px 30px 0px;
+    left: 0px;
+}
+
+.container_child_box p {
+    display:block;
+    margin: 20px 0px;
+}
+
+.container_main .m_all {
+    display:block;
+    margin: 40px 0px;
+}
+
+.container_box{
+    display: table;
+    width: 100%;
+}
+
+.container_child_box{
+    float: left;
+    position: static;
+    width: calc(90% - 260px);
+    min-width: 300px;
+}
\ No newline at end of file
diff --git a/.history/styles/globals_20220517170427.scss b/.history/styles/globals_20220517170427.scss
new file mode 100644
index 0000000..39de0cf
--- /dev/null
+++ b/.history/styles/globals_20220517170427.scss
@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132253.scss b/.history/styles/globals_20220520132253.scss
new file mode 100644
index 0000000..cfd1d73
--- /dev/null
+++ b/.history/styles/globals_20220520132253.scss
@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss'
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132834.scss b/.history/styles/globals_20220520132834.scss
new file mode 100644
index 0000000..fcca351
--- /dev/null
+++ b/.history/styles/globals_20220520132834.scss
@@ -0,0 +1,14 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss'
+@import './components/UX/Input.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132838.scss b/.history/styles/globals_20220520132838.scss
new file mode 100644
index 0000000..c511388
--- /dev/null
+++ b/.history/styles/globals_20220520132838.scss
@@ -0,0 +1,14 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132934.scss b/.history/styles/globals_20220520132934.scss
new file mode 100644
index 0000000..38c5222
--- /dev/null
+++ b/.history/styles/globals_20220520132934.scss
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233948.scss b/.history/styles/globals_20220528233948.scss
new file mode 100644
index 0000000..eb3e63d
--- /dev/null
+++ b/.history/styles/globals_20220528233948.scss
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
diff --git a/.history/styles/globals_20220528233950.scss b/.history/styles/globals_20220528233950.scss
new file mode 100644
index 0000000..f2de895
--- /dev/null
+++ b/.history/styles/globals_20220528233950.scss
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import url();
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233953.scss b/.history/styles/globals_20220528233953.scss
new file mode 100644
index 0000000..a878e36
--- /dev/null
+++ b/.history/styles/globals_20220528233953.scss
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233955.scss b/.history/styles/globals_20220528233955.scss
new file mode 100644
index 0000000..ede39ae
--- /dev/null
+++ b/.history/styles/globals_20220528233955.scss
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233959.scss b/.history/styles/globals_20220528233959.scss
new file mode 100644
index 0000000..49c389c
--- /dev/null
+++ b/.history/styles/globals_20220528233959.scss
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235318.scss b/.history/styles/globals_20220528235318.scss
new file mode 100644
index 0000000..c118512
--- /dev/null
+++ b/.history/styles/globals_20220528235318.scss
@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
diff --git a/.history/styles/globals_20220528235323.scss b/.history/styles/globals_20220528235323.scss
new file mode 100644
index 0000000..7959813
--- /dev/null
+++ b/.history/styles/globals_20220528235323.scss
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import url();
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235326.scss b/.history/styles/globals_20220528235326.scss
new file mode 100644
index 0000000..a9d3baa
--- /dev/null
+++ b/.history/styles/globals_20220528235326.scss
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235328.scss b/.history/styles/globals_20220528235328.scss
new file mode 100644
index 0000000..54e3b0a
--- /dev/null
+++ b/.history/styles/globals_20220528235328.scss
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235332.scss b/.history/styles/globals_20220528235332.scss
new file mode 100644
index 0000000..4c6572e
--- /dev/null
+++ b/.history/styles/globals_20220528235332.scss
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002400.scss b/.history/styles/globals_20220529002400.scss
new file mode 100644
index 0000000..7fc459e
--- /dev/null
+++ b/.history/styles/globals_20220529002400.scss
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
diff --git a/.history/styles/globals_20220529002404.scss b/.history/styles/globals_20220529002404.scss
new file mode 100644
index 0000000..73abb5b
--- /dev/null
+++ b/.history/styles/globals_20220529002404.scss
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import ;
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002407.scss b/.history/styles/globals_20220529002407.scss
new file mode 100644
index 0000000..a1e9df1
--- /dev/null
+++ b/.history/styles/globals_20220529002407.scss
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002409.scss b/.history/styles/globals_20220529002409.scss
new file mode 100644
index 0000000..112e5cd
--- /dev/null
+++ b/.history/styles/globals_20220529002409.scss
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002411.scss b/.history/styles/globals_20220529002411.scss
new file mode 100644
index 0000000..db57ab0
--- /dev/null
+++ b/.history/styles/globals_20220529002411.scss
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002412.scss b/.history/styles/globals_20220529002412.scss
new file mode 100644
index 0000000..db57ab0
--- /dev/null
+++ b/.history/styles/globals_20220529002412.scss
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134250.scss b/.history/styles/globals_20220529134250.scss
new file mode 100644
index 0000000..aeef7cb
--- /dev/null
+++ b/.history/styles/globals_20220529134250.scss
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
diff --git a/.history/styles/globals_20220529134253.scss b/.history/styles/globals_20220529134253.scss
new file mode 100644
index 0000000..8092dda
--- /dev/null
+++ b/.history/styles/globals_20220529134253.scss
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@in
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134254.scss b/.history/styles/globals_20220529134254.scss
new file mode 100644
index 0000000..3ac3112
--- /dev/null
+++ b/.history/styles/globals_20220529134254.scss
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@i
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134300.scss b/.history/styles/globals_20220529134300.scss
new file mode 100644
index 0000000..dbd734a
--- /dev/null
+++ b/.history/styles/globals_20220529134300.scss
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134301.scss b/.history/styles/globals_20220529134301.scss
new file mode 100644
index 0000000..a45153e
--- /dev/null
+++ b/.history/styles/globals_20220529134301.scss
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134302.scss b/.history/styles/globals_20220529134302.scss
new file mode 100644
index 0000000..a45153e
--- /dev/null
+++ b/.history/styles/globals_20220529134302.scss
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143548.scss b/.history/styles/globals_20220529143548.scss
new file mode 100644
index 0000000..f4af276
--- /dev/null
+++ b/.history/styles/globals_20220529143548.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components//';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143553.scss b/.history/styles/globals_20220529143553.scss
new file mode 100644
index 0000000..62bb892
--- /dev/null
+++ b/.history/styles/globals_20220529143553.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143555.scss b/.history/styles/globals_20220529143555.scss
new file mode 100644
index 0000000..90567e1
--- /dev/null
+++ b/.history/styles/globals_20220529143555.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/UX/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143556.scss b/.history/styles/globals_20220529143556.scss
new file mode 100644
index 0000000..5377faf
--- /dev/null
+++ b/.history/styles/globals_20220529143556.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181012.scss b/.history/styles/globals_20220530181012.scss
new file mode 100644
index 0000000..59738dc
--- /dev/null
+++ b/.history/styles/globals_20220530181012.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181015.scss b/.history/styles/globals_20220530181015.scss
new file mode 100644
index 0000000..59738dc
--- /dev/null
+++ b/.history/styles/globals_20220530181015.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/MottoBlock.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181058.scss b/.history/styles/globals_20220530181058.scss
new file mode 100644
index 0000000..361eb41
--- /dev/null
+++ b/.history/styles/globals_20220530181058.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181100.scss b/.history/styles/globals_20220530181100.scss
new file mode 100644
index 0000000..229c2bc
--- /dev/null
+++ b/.history/styles/globals_20220530181100.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/CardPizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181104.scss b/.history/styles/globals_20220530181104.scss
new file mode 100644
index 0000000..c5a1bc5
--- /dev/null
+++ b/.history/styles/globals_20220530181104.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/CardStock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181114.scss b/.history/styles/globals_20220530181114.scss
new file mode 100644
index 0000000..ae8d7f3
--- /dev/null
+++ b/.history/styles/globals_20220530181114.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191125.scss b/.history/styles/globals_20220530191125.scss
new file mode 100644
index 0000000..9816eab
--- /dev/null
+++ b/.history/styles/globals_20220530191125.scss
@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191128.scss b/.history/styles/globals_20220530191128.scss
new file mode 100644
index 0000000..e535599
--- /dev/null
+++ b/.history/styles/globals_20220530191128.scss
@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191130.scss b/.history/styles/globals_20220530191130.scss
new file mode 100644
index 0000000..ccc5e9c
--- /dev/null
+++ b/.history/styles/globals_20220530191130.scss
@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191342.scss b/.history/styles/globals_20220530191342.scss
new file mode 100644
index 0000000..e08edaf
--- /dev/null
+++ b/.history/styles/globals_20220530191342.scss
@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
diff --git a/.history/styles/globals_20220530191345.scss b/.history/styles/globals_20220530191345.scss
new file mode 100644
index 0000000..f090305
--- /dev/null
+++ b/.history/styles/globals_20220530191345.scss
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/UX/PictureText.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191354.scss b/.history/styles/globals_20220530191354.scss
new file mode 100644
index 0000000..15f02f3
--- /dev/null
+++ b/.history/styles/globals_20220530191354.scss
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191355.scss b/.history/styles/globals_20220530191355.scss
new file mode 100644
index 0000000..947e673
--- /dev/null
+++ b/.history/styles/globals_20220530191355.scss
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components//';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191359.scss b/.history/styles/globals_20220530191359.scss
new file mode 100644
index 0000000..c396c1c
--- /dev/null
+++ b/.history/styles/globals_20220530191359.scss
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components//container/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191400.scss b/.history/styles/globals_20220530191400.scss
new file mode 100644
index 0000000..3fba804
--- /dev/null
+++ b/.history/styles/globals_20220530191400.scss
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components//container/ContainerTitle.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193410.scss b/.history/styles/globals_20220530193410.scss
new file mode 100644
index 0000000..03e3c9f
--- /dev/null
+++ b/.history/styles/globals_20220530193410.scss
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193413.scss b/.history/styles/globals_20220530193413.scss
new file mode 100644
index 0000000..34b8e16
--- /dev/null
+++ b/.history/styles/globals_20220530193413.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/container/ContainerTitle.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193420.scss b/.history/styles/globals_20220530193420.scss
new file mode 100644
index 0000000..defa6cd
--- /dev/null
+++ b/.history/styles/globals_20220530193420.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193425.scss b/.history/styles/globals_20220530193425.scss
new file mode 100644
index 0000000..784ebdf
--- /dev/null
+++ b/.history/styles/globals_20220530193425.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193426.scss b/.history/styles/globals_20220530193426.scss
new file mode 100644
index 0000000..784ebdf
--- /dev/null
+++ b/.history/styles/globals_20220530193426.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193427.scss b/.history/styles/globals_20220530193427.scss
new file mode 100644
index 0000000..9044725
--- /dev/null
+++ b/.history/styles/globals_20220530193427.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193428.scss b/.history/styles/globals_20220530193428.scss
new file mode 100644
index 0000000..9044725
--- /dev/null
+++ b/.history/styles/globals_20220530193428.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193453.scss b/.history/styles/globals_20220530193453.scss
new file mode 100644
index 0000000..f255a58
--- /dev/null
+++ b/.history/styles/globals_20220530193453.scss
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
diff --git a/.history/styles/globals_20220530193459.scss b/.history/styles/globals_20220530193459.scss
new file mode 100644
index 0000000..d248d54
--- /dev/null
+++ b/.history/styles/globals_20220530193459.scss
@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193502.scss b/.history/styles/globals_20220530193502.scss
new file mode 100644
index 0000000..f469118
--- /dev/null
+++ b/.history/styles/globals_20220530193502.scss
@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components//block/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193504.scss b/.history/styles/globals_20220530193504.scss
new file mode 100644
index 0000000..1d8ace8
--- /dev/null
+++ b/.history/styles/globals_20220530193504.scss
@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components//block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193506.scss b/.history/styles/globals_20220530193506.scss
new file mode 100644
index 0000000..e9f728f
--- /dev/null
+++ b/.history/styles/globals_20220530193506.scss
@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135843.scss b/.history/styles/globals_20220531135843.scss
new file mode 100644
index 0000000..8c2a7d1
--- /dev/null
+++ b/.history/styles/globals_20220531135843.scss
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135848.scss b/.history/styles/globals_20220531135848.scss
new file mode 100644
index 0000000..43bcacc
--- /dev/null
+++ b/.history/styles/globals_20220531135848.scss
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  src: url('../');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135853.scss b/.history/styles/globals_20220531135853.scss
new file mode 100644
index 0000000..0802015
--- /dev/null
+++ b/.history/styles/globals_20220531135853.scss
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  src: url('../public/');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135855.scss b/.history/styles/globals_20220531135855.scss
new file mode 100644
index 0000000..f8ec912
--- /dev/null
+++ b/.history/styles/globals_20220531135855.scss
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  src: url('../public/assets/');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135856.scss b/.history/styles/globals_20220531135856.scss
new file mode 100644
index 0000000..6dbf47a
--- /dev/null
+++ b/.history/styles/globals_20220531135856.scss
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135903.scss b/.history/styles/globals_20220531135903.scss
new file mode 100644
index 0000000..8c2a7d1
--- /dev/null
+++ b/.history/styles/globals_20220531135903.scss
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135907.scss b/.history/styles/globals_20220531135907.scss
new file mode 100644
index 0000000..e9f728f
--- /dev/null
+++ b/.history/styles/globals_20220531135907.scss
@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Rubik';
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135951.scss b/.history/styles/globals_20220531135951.scss
new file mode 100644
index 0000000..aeb317a
--- /dev/null
+++ b/.history/styles/globals_20220531135951.scss
@@ -0,0 +1,23 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135953.scss b/.history/styles/globals_20220531135953.scss
new file mode 100644
index 0000000..11dea81
--- /dev/null
+++ b/.history/styles/globals_20220531135953.scss
@@ -0,0 +1,24 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135954.scss b/.history/styles/globals_20220531135954.scss
new file mode 100644
index 0000000..11dea81
--- /dev/null
+++ b/.history/styles/globals_20220531135954.scss
@@ -0,0 +1,24 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531161410.scss b/.history/styles/globals_20220531161410.scss
new file mode 100644
index 0000000..4c28713
--- /dev/null
+++ b/.history/styles/globals_20220531161410.scss
@@ -0,0 +1,24 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
diff --git a/.history/styles/globals_20220531161417.scss b/.history/styles/globals_20220531161417.scss
new file mode 100644
index 0000000..043e987
--- /dev/null
+++ b/.history/styles/globals_20220531161417.scss
@@ -0,0 +1,25 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components//'
\ No newline at end of file
diff --git a/.history/styles/globals_20220531161420.scss b/.history/styles/globals_20220531161420.scss
new file mode 100644
index 0000000..5e8ae70
--- /dev/null
+++ b/.history/styles/globals_20220531161420.scss
@@ -0,0 +1,25 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/'
\ No newline at end of file
diff --git a/.history/styles/globals_20220531161423.scss b/.history/styles/globals_20220531161423.scss
new file mode 100644
index 0000000..fdc506e
--- /dev/null
+++ b/.history/styles/globals_20220531161423.scss
@@ -0,0 +1,25 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss'
\ No newline at end of file
diff --git a/.history/styles/globals_20220603174318.scss b/.history/styles/globals_20220603174318.scss
new file mode 100644
index 0000000..879eedb
--- /dev/null
+++ b/.history/styles/globals_20220603174318.scss
@@ -0,0 +1,26 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220603175555.scss b/.history/styles/globals_20220603175555.scss
new file mode 100644
index 0000000..113359e
--- /dev/null
+++ b/.history/styles/globals_20220603175555.scss
@@ -0,0 +1,27 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220616135719.scss b/.history/styles/globals_20220616135719.scss
new file mode 100644
index 0000000..4509514
--- /dev/null
+++ b/.history/styles/globals_20220616135719.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220616135731.scss b/.history/styles/globals_20220616135731.scss
new file mode 100644
index 0000000..130d99b
--- /dev/null
+++ b/.history/styles/globals_20220616135731.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220617161611.scss b/.history/styles/globals_20220617161611.scss
new file mode 100644
index 0000000..3939741
--- /dev/null
+++ b/.history/styles/globals_20220617161611.scss
@@ -0,0 +1,32 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220617161641.scss b/.history/styles/globals_20220617161641.scss
new file mode 100644
index 0000000..a9eb2e6
--- /dev/null
+++ b/.history/styles/globals_20220617161641.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220617161642.scss b/.history/styles/globals_20220617161642.scss
new file mode 100644
index 0000000..130d99b
--- /dev/null
+++ b/.history/styles/globals_20220617161642.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220617162229.scss b/.history/styles/globals_20220617162229.scss
new file mode 100644
index 0000000..8278ecf
--- /dev/null
+++ b/.history/styles/globals_20220617162229.scss
@@ -0,0 +1,32 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+body {
+  overflow: hidden;
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220617162321.scss b/.history/styles/globals_20220617162321.scss
new file mode 100644
index 0000000..130d99b
--- /dev/null
+++ b/.history/styles/globals_20220617162321.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618081433.scss b/.history/styles/globals_20220618081433.scss
new file mode 100644
index 0000000..05a6f77
--- /dev/null
+++ b/.history/styles/globals_20220618081433.scss
@@ -0,0 +1,29 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618083103.scss b/.history/styles/globals_20220618083103.scss
new file mode 100644
index 0000000..bd741bd
--- /dev/null
+++ b/.history/styles/globals_20220618083103.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCard.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618104257.scss b/.history/styles/globals_20220618104257.scss
new file mode 100644
index 0000000..a5a4ba1
--- /dev/null
+++ b/.history/styles/globals_20220618104257.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/UX/Modal.scss';
+@import './components/block/PizzaCart.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618150050.scss b/.history/styles/globals_20220618150050.scss
new file mode 100644
index 0000000..25c8c56
--- /dev/null
+++ b/.history/styles/globals_20220618150050.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/modals/pizza/Modal.scss';
+@import './components/block/PizzaCart.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618150113.scss b/.history/styles/globals_20220618150113.scss
new file mode 100644
index 0000000..9dd9f21
--- /dev/null
+++ b/.history/styles/globals_20220618150113.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import './components/customer/modals/pizza/Modal.scss';
+@import './components/block/PizzaCart.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618150247.scss b/.history/styles/globals_20220618150247.scss
new file mode 100644
index 0000000..25c8c56
--- /dev/null
+++ b/.history/styles/globals_20220618150247.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/modals/pizza/Modal.scss';
+@import './components/block/PizzaCart.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618150336.scss b/.history/styles/globals_20220618150336.scss
new file mode 100644
index 0000000..06e4860
--- /dev/null
+++ b/.history/styles/globals_20220618150336.scss
@@ -0,0 +1,30 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/modals/pizza/Modal.scss';
+@import './components/block/PizzaCart.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618151748.scss b/.history/styles/globals_20220618151748.scss
new file mode 100644
index 0000000..57b7084
--- /dev/null
+++ b/.history/styles/globals_20220618151748.scss
@@ -0,0 +1,29 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/modals/pizza/Modal.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618154224.scss b/.history/styles/globals_20220618154224.scss
new file mode 100644
index 0000000..9ee29cb
--- /dev/null
+++ b/.history/styles/globals_20220618154224.scss
@@ -0,0 +1,29 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/modals/pizza/styles/index.scss';
+@import './components/block/Ingredients';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618154510.scss b/.history/styles/globals_20220618154510.scss
new file mode 100644
index 0000000..1cf1eb9
--- /dev/null
+++ b/.history/styles/globals_20220618154510.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/block/Pizza.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/modals/pizza/styles/index.scss';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618175543.scss b/.history/styles/globals_20220618175543.scss
new file mode 100644
index 0000000..e24e83b
--- /dev/null
+++ b/.history/styles/globals_20220618175543.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/block/pizza/styles/index.scss';
+@import '../components/customer/pages/index/modals/pizza/styles/index.scss';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220618175549.scss b/.history/styles/globals_20220618175549.scss
new file mode 100644
index 0000000..f915365
--- /dev/null
+++ b/.history/styles/globals_20220618175549.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/block/Pizza/styles/index.scss';
+@import '../components/customer/pages/index/modals/pizza/styles/index.scss';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220517155440.scss b/.history/styles/libs/ResetCss_20220517155440.scss
new file mode 100644
index 0000000..d2741e5
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220517155440.scss
@@ -0,0 +1,87 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Выставляем основные настройки по-умолчанию для body */
+body {
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220529151626.scss b/.history/styles/libs/ResetCss_20220529151626.scss
new file mode 100644
index 0000000..5bcb912
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220529151626.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220529151737.scss b/.history/styles/libs/ResetCss_20220529151737.scss
new file mode 100644
index 0000000..2333fe0
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220529151737.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220529152753.scss b/.history/styles/libs/ResetCss_20220529152753.scss
new file mode 100644
index 0000000..5bcb912
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220529152753.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220529155109.scss b/.history/styles/libs/ResetCss_20220529155109.scss
new file mode 100644
index 0000000..d7764e4
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220529155109.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+ 
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220530180616.scss b/.history/styles/libs/ResetCss_20220530180616.scss
new file mode 100644
index 0000000..327aff4
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220530180616.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+ 
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  /margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220530180617.scss b/.history/styles/libs/ResetCss_20220530180617.scss
new file mode 100644
index 0000000..d91e9d9
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220530180617.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+ 
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  /*margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220530180621.scss b/.history/styles/libs/ResetCss_20220530180621.scss
new file mode 100644
index 0000000..49eaf7f
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220530180621.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+ 
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  /*margin: 0;*/
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220530180724.scss b/.history/styles/libs/ResetCss_20220530180724.scss
new file mode 100644
index 0000000..d7764e4
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220530180724.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+ 
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220530180731.scss b/.history/styles/libs/ResetCss_20220530180731.scss
new file mode 100644
index 0000000..5bcb912
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220530180731.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220530180732.scss b/.history/styles/libs/ResetCss_20220530180732.scss
new file mode 100644
index 0000000..5bcb912
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220530180732.scss
@@ -0,0 +1,79 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/styles/libs/ResetCss_20220531140246.scss b/.history/styles/libs/ResetCss_20220531140246.scss
new file mode 100644
index 0000000..d9f8581
--- /dev/null
+++ b/.history/styles/libs/ResetCss_20220531140246.scss
@@ -0,0 +1,80 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+  font-family: 'Rubik';
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/.history/tsconfig_20220516191522.json b/.history/tsconfig_20220516191522.json
new file mode 100644
index 0000000..99710e8
--- /dev/null
+++ b/.history/tsconfig_20220516191522.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/tsconfig_20220525193046.json b/.history/tsconfig_20220525193046.json
new file mode 100644
index 0000000..dc7f5ae
--- /dev/null
+++ b/.history/tsconfig_20220525193046.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/tsconfig_20220530174253.json b/.history/tsconfig_20220530174253.json
new file mode 100644
index 0000000..832a879
--- /dev/null
+++ b/.history/tsconfig_20220530174253.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss", "pages/api/loadingPizzaCard.js"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/tsconfig_20220530174812.json b/.history/tsconfig_20220530174812.json
new file mode 100644
index 0000000..c458c04
--- /dev/null
+++ b/.history/tsconfig_20220530174812.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss", "pages/api/loadingCategories.js", "pages/api/loadingPizzaCard.js"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/tsconfig_20220530174817.json b/.history/tsconfig_20220530174817.json
new file mode 100644
index 0000000..d0184b0
--- /dev/null
+++ b/.history/tsconfig_20220530174817.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss", "pages/api/loadingPizza.js", "pages/api/loadingCategories.js", "pages/api/loadingPizzaCard.js"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/tsconfig_20220530174823.json b/.history/tsconfig_20220530174823.json
new file mode 100644
index 0000000..a661f5d
--- /dev/null
+++ b/.history/tsconfig_20220530174823.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss", "pages/api/loadingStock.js", "pages/api/loadingPizza.js", "pages/api/loadingCategories.js", "pages/api/loadingPizzaCard.js"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/tsconfig_20220617165456.json b/.history/tsconfig_20220617165456.json
new file mode 100644
index 0000000..cab139f
--- /dev/null
+++ b/.history/tsconfig_20220617165456.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss", "pages/api/loadingStock.js", "pages/api/loadingPizza.js", "pages/api/loadingCategories.js", "pages/api/loadingPizzaCard.js", "components/admin/pages/login/useToken.js", "components/admin/pages/login/NewPassword.js", "components/admin/pages/login/Entrance.js", "components/admin/pages/login/EnteringMail.js", "components/admin/pages/login/EnteringCode.js"],
+  "exclude": ["node_modules"]
+}
diff --git a/.history/utils/parse-user_20220525185227.ts b/.history/utils/parse-user_20220525185227.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/utils/parse-user_20220525185325.ts b/.history/utils/parse-user_20220525185325.ts
new file mode 100644
index 0000000..8c22c34
--- /dev/null
+++ b/.history/utils/parse-user_20220525185325.ts
@@ -0,0 +1,96 @@
+import { GetServerSidePropsContext } from "next";
+import { DiscordGuild, DiscordUser, DiscordUserPartial, RawDiscordGuild, rawDiscordUser } from "./types";
+import { parse } from "cookie";
+import { verify } from "jsonwebtoken";
+import { config } from "./config";
+import fetch from "node-fetch";
+import { getUser } from "../db/db";
+
+export interface ParseError {
+  error: boolean;
+  message: string;
+}
+
+export function parseGuild(guild: RawDiscordGuild, fetchedGuild: RawDiscordGuild): DiscordGuild {
+  //If you have the API running change this from:
+  //const botIn = fetchedGuild == null;
+  //to this:
+  //const botIn = fetchedGuild != null;
+  const botIn = fetchedGuild == null;
+
+  return {
+    features: guild.features,
+    icon: guild.icon,
+    iconURL: guild.icon == null ? null : `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png?size=4096`,
+    id: guild.id,
+    name: guild.name,
+    owner: guild.owner,
+    permissions: guild.permissions,
+    botIn: botIn
+  }
+}
+
+export async function parseUserFromAPI(ctx: GetServerSidePropsContext, fetched: rawDiscordUser): Promise<DiscordUserPartial> {
+  return {
+    ...fetched,
+    tag: `${fetched.username}#${fetched.discriminator}`,
+    avatarURL: `https://cdn.discordapp.com/avatars/${fetched.id}/${fetched.avatar}.png?size=4096`,
+    bannerURL: `https://cdn.discordapp.com/banners/${fetched.id}/${fetched.banner}.png?size=4096`
+  };  
+}
+
+export async function parseUser(ctx: GetServerSidePropsContext, getGuilds: boolean = false): Promise<DiscordUser | null> {
+  if (!ctx.req.headers.cookie) {
+    return null;
+  }
+
+  const token = parse(ctx.req.headers.cookie)[config.cookieName];
+
+  if (!token) {
+    return null;
+  }
+
+  let parsedGuilds = null;
+
+  if(getGuilds){
+    const raw = await getUser({
+      jwt_token: token
+    });
+  
+    const guilds: RawDiscordGuild[] = await fetch("http://discord.com/api/users/@me/guilds", {
+      headers: { Authorization: `${raw.token_type} ${raw.access_token}` },
+    }).then((res) => res.json());
+
+    const allGuilds: RawDiscordGuild[] = [];
+    // const allGuilds: RawDiscordGuild[] = await fetch(`http://discord.com/api/guilds`, {
+    //   headers: {
+    //     Authorization: `Bot ${config.botToken}`
+    //   }
+    // }).then((res) => res.json());
+
+    if(!guilds || !Array.isArray(guilds)) return null;
+
+    console.log(allGuilds)
+    const rawGuilds = guilds.map(e => {
+      const guildFromAll = allGuilds.find(e => e.id == e.id);
+      const base = parseGuild(e, guildFromAll);
+      if(base.permissions && 0x0000000000000008 != 8) return;
+      return base;
+    });
+
+    parsedGuilds = rawGuilds.filter(e => e != undefined);
+  }
+
+  try {
+    let { iat, exp, ...user } = verify(token, config.jwtSecret) as DiscordUser & { iat: number; exp: number };
+
+    return {
+      ...user,
+      avatarURL: `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=4096`,
+      guilds: parsedGuilds?.length <= 0 ? null : parsedGuilds
+    };
+  } catch (e) {
+    console.log(e);
+    return null;
+  }
+}
\ No newline at end of file
diff --git a/.history/utils/types_20220525185014.ts b/.history/utils/types_20220525185014.ts
new file mode 100644
index 0000000..e69de29
diff --git a/.history/utils/types_20220525185048.ts b/.history/utils/types_20220525185048.ts
new file mode 100644
index 0000000..9c9d3ed
--- /dev/null
+++ b/.history/utils/types_20220525185048.ts
@@ -0,0 +1,12 @@
+export interface DiscordUser {
+    id: string;
+    username: string;
+    avatar: string;
+    discriminator: string;
+    public_flags: number;
+    flags: number;
+    locale: string;
+    mfa_enabled: boolean;
+    premium_type: number;
+    avatarURL: string;
+  }
\ No newline at end of file
diff --git a/components/UI/Button.tsx b/components/UI/Button.tsx
new file mode 100644
index 0000000..915f126
--- /dev/null
+++ b/components/UI/Button.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({align, styles, children, onClick}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick={onClick}> {children} </button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/ButtonImg.tsx b/components/UI/ButtonImg.tsx
new file mode 100644
index 0000000..e745281
--- /dev/null
+++ b/components/UI/ButtonImg.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/Input.tsx b/components/UI/Input.tsx
new file mode 100644
index 0000000..abaf6e0
--- /dev/null
+++ b/components/UI/Input.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    onChange: (name: string, value: string,) => void;
+    type: string,
+    name: string,
+    label: string,
+    value: string,
+  }
+
+  export const Input: React.FC<Props> = ({type, name, label, onChange, value }) => {
+    return(
+        <div className={'blocks'}>
+            <span className={classNames('input input_filled')}>
+                <input className={classNames('input_field input_field_mui')}
+                        onChange={event => onChange(event.target.name, event.target.value)}
+                        type={type}
+                        name={name}
+                        value={value}/>
+                <label className={classNames('input_label input_label_mui')} htmlFor={label}>
+                    <span className={classNames('input_label_content input_label_content_mui')}>{label}</span>
+                </label>
+            </span>
+      </div>
+    )
+}
+
diff --git a/components/UI/InputRadio.tsx b/components/UI/InputRadio.tsx
new file mode 100644
index 0000000..fde5fca
--- /dev/null
+++ b/components/UI/InputRadio.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+type Props = {
+    onChange: (value: string, checked: boolean) => void,
+    num: number,
+    variable: number,
+    label: string,
+    value: number,
+  }
+
+  export const InputRadio: React.FC<Props> = ({num, variable, onChange }) => {
+      console.log(num, variable);
+    return(
+        <input
+            type="radio"
+            name="radio"
+            className='radioButton'
+            value={num}
+            onChange={event => onChange(event.target.value, event.target.checked)}
+            checked={variable == num}
+        />
+    )
+}
+
diff --git a/components/UI/Label.tsx b/components/UI/Label.tsx
new file mode 100644
index 0000000..b1d3da1
--- /dev/null
+++ b/components/UI/Label.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const Label: React.FC<Props> = ({children }) => {
+    return(
+        <div className='label_main'>
+            <label>{children}</label>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/LinkButton.tsx b/components/UI/LinkButton.tsx
new file mode 100644
index 0000000..6dc8dbd
--- /dev/null
+++ b/components/UI/LinkButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classNames from 'classnames';
+
+interface Props {
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const LinkButton: React.FC<Props> = ({onClick, children}) => {
+    return(
+        <div className='link_main'>
+            <button type="submit" className= {classNames('link_button')} onClick = {() => onClick()}>{children}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/Modal.tsx b/components/UI/Modal.tsx
new file mode 100644
index 0000000..c0f2932
--- /dev/null
+++ b/components/UI/Modal.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+                position: string,
+                styles: string,
+                children: React.ReactNode };
+
+export const Modal: React.FC<Props> = ({position, styles, children}) => {
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog ', position)}>
+                <div className={classNames('modal_content ', styles)}>
+                    <div className='modal_body'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
\ No newline at end of file
diff --git a/components/UI/PictureText.tsx b/components/UI/PictureText.tsx
new file mode 100644
index 0000000..18982b5
--- /dev/null
+++ b/components/UI/PictureText.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image';
+
+interface Props {
+    children: React.ReactNode;
+    src: string;
+    width: number;
+    height: number;
+  }
+
+export const PictureText: React.FC<Props> = ({src, width, height, children}) => {
+    return(
+        <div className={'pictureText_main'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={'pizza'}
+                width={width}
+                height={height}
+            />
+                <p className={'text'}>{children}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/SmallText.tsx b/components/UI/SmallText.tsx
new file mode 100644
index 0000000..f4b00e9
--- /dev/null
+++ b/components/UI/SmallText.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+  }
+
+export const SmallText: React.FC<Props> = ({children }) => {
+    return(
+        <div>
+            <p>{children}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/Title.tsx b/components/UI/Title.tsx
new file mode 100644
index 0000000..5b6c871
--- /dev/null
+++ b/components/UI/Title.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface Props {
+    children?: React.ReactNode;
+}
+
+export const Title: React.FC<Props> = ({ children }) => {
+    return(
+        <div className="Title">
+            <h2>{children}</h2>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/UI/index.ts b/components/UI/index.ts
new file mode 100644
index 0000000..8eeeed8
--- /dev/null
+++ b/components/UI/index.ts
@@ -0,0 +1,10 @@
+export * from './Button'
+export * from './Input'
+export * from './Label'
+export * from './Title'
+export * from './LinkButton'
+export * from './SmallText'
+export * from './ButtonImg'
+export * from './PictureText'
+export * from './Modal'
+export * from './InputRadio'
\ No newline at end of file
diff --git a/components/admin/function/hashPassword.ts b/components/admin/function/hashPassword.ts
new file mode 100644
index 0000000..991e6bb
--- /dev/null
+++ b/components/admin/function/hashPassword.ts
@@ -0,0 +1,8 @@
+var crypto = require('crypto');
+
+export function HashPassword(password: string, salt: string, callback: (arg: string) => void) {
+    crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err: string, derivedKey: Buffer) => {
+        if (err) throw err;
+        callback(derivedKey.toString('hex'));
+     });
+}
\ No newline at end of file
diff --git a/components/admin/function/postData.ts b/components/admin/function/postData.ts
new file mode 100644
index 0000000..5aa649a
--- /dev/null
+++ b/components/admin/function/postData.ts
@@ -0,0 +1,19 @@
+async function postData(url = '', data = {}) {
+    // Default options are marked with *
+    const response = await fetch(url, {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: 'follow', // manual, *follow, error
+      referrerPolicy: 'no-referrer', // no-referrer, *client
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    });
+    return await response.json(); // parses JSON response into native JavaScript objects
+  }
+
+  export default postData;
\ No newline at end of file
diff --git a/components/admin/function/useToken.ts b/components/admin/function/useToken.ts
new file mode 100644
index 0000000..f909e47
--- /dev/null
+++ b/components/admin/function/useToken.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect, SetStateAction } from 'react';
+
+
+export default function useToken() {
+  const [token, setToken] = useState('');
+  useEffect(() => setToken(localStorage.getItem("token") || ""), []);
+  const saveToken = (userToken: { token: SetStateAction<string>; }) => {
+    localStorage.setItem('token', JSON.stringify(userToken));
+    setToken(userToken?.token);
+  };
+
+  return {
+    setToken: saveToken,
+    token
+  }
+}
\ No newline at end of file
diff --git a/components/admin/pages/Root/Main.tsx b/components/admin/pages/Root/Main.tsx
new file mode 100644
index 0000000..8b2d2c2
--- /dev/null
+++ b/components/admin/pages/Root/Main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const MainLayoutRoot: React.FC = () => {
+  return (
+    <div className="wrapper">
+      <div className="content">
+ ffdgfdgdfgdf dfg fddf dfg dfgdf 
+      </div>
+    </div>
+  );
+};
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/components/admin/pages/login/EnteringCode.js b/components/admin/pages/login/EnteringCode.js
new file mode 100644
index 0000000..3ef9c63
--- /dev/null
+++ b/components/admin/pages/login/EnteringCode.js
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Button, Input, Label, Title } from '../../../UI';
+
+const EnteringCode = (props) => {
+    const [data, setData] = useState({'code': ''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ...data, [e.target.name]: e.target.value});
+    }
+    const handleEntrance = () => {
+        props.data.code == data.code ? props.updateData({status:3, email:props.data.email, code:props.data.code}) : setInformation('Код введен не верно');
+     }
+    return(
+        <>
+            <Title> Введите код из письма </Title>
+            <Input
+              label={'Код'}
+              name={'code'}
+              type={'number'}
+              onChange={updateData}
+              value={data.code}
+            />
+            <Button name={'Entrance'} onClick={handleEntrance}>Проверить код</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+export default EnteringCode;
diff --git a/components/admin/pages/login/EnteringMail.js b/components/admin/pages/login/EnteringMail.js
new file mode 100644
index 0000000..30bc6f2
--- /dev/null
+++ b/components/admin/pages/login/EnteringMail.js
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../component/Button';
+import Input from '../../component/Input';
+import LinkButton from '../../component/LinkButton';
+import Title from '../../component/Title';
+import postData from '../../function/postData';
+import SmallText from '../../component/SmallText';
+
+const EntranceMail = ({setToken, updateData}) => {
+    const [_data, setData] = useState({login:'',password:''});
+    const [information, setInformation] = useState('');
+
+    const update_Data = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+    }
+
+    const handleEntrance = () => {
+        console.log(_data);
+        postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ? setToken(data) : setInformation(data.error);
+            });
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={update_Data} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={update_Data} value={_data.password}/>
+            <Button onClick={handleEntrance}>Войти</Button>
+            <SmallText>{information}</SmallText>
+            <LinkButton onClick={(e) => updateData({status:1})}>Забыл/Сбросить пароль</LinkButton>
+        </>
+    )
+}
+
+Entrance.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default Entrance;
\ No newline at end of file
diff --git a/components/admin/pages/login/Entrance.tsx b/components/admin/pages/login/Entrance.tsx
new file mode 100644
index 0000000..a38b376
--- /dev/null
+++ b/components/admin/pages/login/Entrance.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import type { NextPage } from 'next';
+import { useSelector } from 'react-redux';
+
+import { Button, Input, Title, SmallText } from '../../../UI';
+import { useAppDispatch } from '../../../../redux/store';
+import { fetchToken } from '../../../../redux/login/asyncActions';
+import { selectTokenData } from '../../../../redux/login/selectors';
+
+export const Entrance: NextPage = () => {
+    const [_data, setData] = useState({login:'', password:''});
+    const dispatch = useAppDispatch();
+    const { token, status_token } = useSelector(selectTokenData);
+    const [information, setInformation] = useState<string>();
+
+    function replacer(key:string, value:string) {
+        if (key === 'error') {
+            setInformation(value);
+        } else { setInformation('') }
+        return value;
+      }
+
+    const getToken = () => {
+        dispatch(
+          fetchToken({
+            login: String(_data.login),
+            password: String(_data.password)
+          }),
+        );
+        JSON.stringify(token, replacer);
+      //  token ?
+       // console.log(token[0].token)
+        //setToken(token[0].token) :
+       // :
+        //setInformation(token);
+        console.log(status_token);
+    };
+
+    const onChange = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const reset = (name: string, value:string) => {
+        setData({ ..._data, [name]: value});
+    };
+
+    const handleEntrance = () => {
+        console.log(_data);
+        /*postData('/api/login', { _data })
+            .then((data) => {
+                console.log(data);
+                data.token ?
+                setToken(data) :
+                setInformation(data.error);
+        }); */
+     }
+    return(
+        <>
+            <Title> Вход в систему </Title>
+            <Input label={'Логин'} name={'login'} type={'text'} onChange={onChange} value={_data.login}/>
+            <Input label={'Пароль'} name={'password'} type={'password'} onChange={onChange} value={_data.password}/>
+            <Button onClick={getToken} align={''} styles={'yellow'}>Войти</Button>
+            <Button onClick={handleEntrance} align={''} styles={'yellow'}>Забыл/Сбросить пароль</Button>
+            <SmallText>{information}</SmallText>
+        </>
+    )
+}
+
+
diff --git a/components/admin/pages/login/Index.ts b/components/admin/pages/login/Index.ts
new file mode 100644
index 0000000..8518799
--- /dev/null
+++ b/components/admin/pages/login/Index.ts
@@ -0,0 +1 @@
+export * from './Entrance'
\ No newline at end of file
diff --git a/components/admin/pages/login/NewPassword.js b/components/admin/pages/login/NewPassword.js
new file mode 100644
index 0000000..9b97d8c
--- /dev/null
+++ b/components/admin/pages/login/NewPassword.js
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../component/Button';
+import Input from '../../component/Input';
+import Title from '../../component/Title';
+import Label from '../../component/Label';
+import postData from '../../function/postData';
+
+const NewPassword = (props) => {
+    const [_data, setData] = useState({email: props.email, password:'', passwordRepeat:''});
+    const [information, setInformation] = useState('');
+    const updateData = e => {
+        setData({ ..._data, [e.target.name]: e.target.value});
+      }
+    const handleEntrance = () => {
+        console.log(_data);
+        if (_data.password === _data.passwordRepeat) {
+            postData('/api/newpassword', {_data})
+                .then((data) => {
+                    console.log(data[0]);
+                    data.token ? props.setToken(data) : setInformation(data.error);
+                   // setToken(data[0]);
+            });
+        } else {setInformation('Пароли не совпадают');}
+     }
+    return(
+        <>
+            <Title> Введите новый пароль </Title>
+            <Input label={'Новый пароль'} type={'password'} name={'password'} onChange={updateData} value={_data.password}/>
+            <Input label={'Повтор нового пароля'} type={'password'} name={'passwordRepeat'} onChange={updateData} value={_data.passwordRepeat}/>
+            <Button name={'Entrance'} onClick={handleEntrance}>Сохранить пароль</Button>
+            <Label>{information}</Label>
+        </>
+    )
+}
+
+NewPassword.propTypes = {
+    setToken: PropTypes.func.isRequired
+  }
+
+export default NewPassword;
\ No newline at end of file
diff --git a/components/admin/pages/login/useToken.js b/components/admin/pages/login/useToken.js
new file mode 100644
index 0000000..3e9e4b6
--- /dev/null
+++ b/components/admin/pages/login/useToken.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+
+export default function useToken() {
+  const [token, setToken] = useState('');
+  useEffect(() => setToken(localStorage.getItem("token")), []);
+  const saveToken = userToken => {
+    localStorage.setItem('token', JSON.stringify(userToken));
+    setToken(userToken?.token);
+  };
+
+  return {
+    setToken: saveToken,
+    token
+  }
+}
\ No newline at end of file
diff --git a/components/customer/containers/Box.tsx b/components/customer/containers/Box.tsx
new file mode 100644
index 0000000..c35bf2c
--- /dev/null
+++ b/components/customer/containers/Box.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Box: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+            <section >
+                <ul className={'vendor-list__ul'}>
+                    {children}
+                </ul>
+            </section>
+        </div>
+    )
+}
+
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/components/customer/containers/BoxScroll.tsx b/components/customer/containers/BoxScroll.tsx
new file mode 100644
index 0000000..618ba67
--- /dev/null
+++ b/components/customer/containers/BoxScroll.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const BoxScroll: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container'} >
+           <section className={'box_scroll'} >
+                {children}
+            </section>
+        </div>
+    )
+}
+type Props = { children: React.ReactNode };
\ No newline at end of file
diff --git a/components/customer/containers/ContainerInside.tsx b/components/customer/containers/ContainerInside.tsx
new file mode 100644
index 0000000..d87493b
--- /dev/null
+++ b/components/customer/containers/ContainerInside.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    children: React.ReactNode,
+  };
+
+export const ContainerInside: React.FC<Props> = ({children}) => {
+    return(
+        <div className={'container_box'}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/containers/ContainerTitle.tsx b/components/customer/containers/ContainerTitle.tsx
new file mode 100644
index 0000000..e12e117
--- /dev/null
+++ b/components/customer/containers/ContainerTitle.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    children: React.ReactNode,
+  };
+
+export const ContainerTitle: React.FC<Props> = ({title, children}) => {
+    return(
+        <div className={'container_main'}>
+            <p className={'container_title'}> {title} </p>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/containers/index.ts b/components/customer/containers/index.ts
new file mode 100644
index 0000000..6964063
--- /dev/null
+++ b/components/customer/containers/index.ts
@@ -0,0 +1,4 @@
+export * from './BoxScroll';
+export * from './ContainerTitle';
+export * from './ContainerInside';
+export * from './Box'
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Categories/Categories.tsx b/components/customer/pages/index/block/Categories/Categories.tsx
new file mode 100644
index 0000000..736cbdd
--- /dev/null
+++ b/components/customer/pages/index/block/Categories/Categories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon')}
+            id={type}>{name}
+        </a>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Categories/Skeleton.tsx b/components/customer/pages/index/block/Categories/Skeleton.tsx
new file mode 100644
index 0000000..5ec378b
--- /dev/null
+++ b/components/customer/pages/index/block/Categories/Skeleton.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const CategoriesSkeleton = () => (
+  <ContentLoader
+    className='categories_skeleton'
+    speed={2}
+    width={120}
+    height={50}
+    viewBox="0 0 120 50"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="120" height="120" />
+  </ContentLoader>
+);
diff --git a/components/customer/pages/index/block/Categories/index.ts b/components/customer/pages/index/block/Categories/index.ts
new file mode 100644
index 0000000..3b18803
--- /dev/null
+++ b/components/customer/pages/index/block/Categories/index.ts
@@ -0,0 +1,2 @@
+export * from './Categories'
+export * from './Skeleton'
\ No newline at end of file
diff --git a/components/customer/pages/index/block/DeliveryArea/DeliveryArea.tsx b/components/customer/pages/index/block/DeliveryArea/DeliveryArea.tsx
new file mode 100644
index 0000000..ecb66cd
--- /dev/null
+++ b/components/customer/pages/index/block/DeliveryArea/DeliveryArea.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DeliveryArea: React.FC = () => {
+  return (
+    <>
+        <p className='title_delivery'>Зона доставки пиццы</p>
+        <script type="text/javascript"
+          async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0f873f2d98aebf475fc734808928e092d0162bd9fac2fbce8c1b504870f76ae0&amp;width=100%25&amp;height=400&amp;lang=ru_RU&amp;scroll=true">
+        </script>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/components/customer/pages/index/block/DeliveryArea/index.ts b/components/customer/pages/index/block/DeliveryArea/index.ts
new file mode 100644
index 0000000..5a3bf3c
--- /dev/null
+++ b/components/customer/pages/index/block/DeliveryArea/index.ts
@@ -0,0 +1 @@
+export * from './DeliveryArea'
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Description/Description.tsx b/components/customer/pages/index/block/Description/Description.tsx
new file mode 100644
index 0000000..d933201
--- /dev/null
+++ b/components/customer/pages/index/block/Description/Description.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { ContainerTitle, ContainerInside } from '../../../../containers'
+import { PictureText } from '../../../../../UI'
+
+export const Description: React.FC = () => {
+    return(
+        <ContainerTitle title={'Доставка пиццы в Краснодаре'}>
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы проголодались на работе? Или удобно устроились перед телевизором, чтобы посмотреть фильм?
+                    А может, к Вам внезапно нагрянули друзья, а в холодильнике пусто? Пицца с доставкой от пиццерий.<br/>
+                    Pizza - отличный выход для любой из этих ситуаций.</p>
+                    <p>Вам остается только определиться, какой из видов этого итальянского блюда Вы хотите попробовать.
+                    У Вас также есть прекрасная возможность заказать дополнительные ингредиенты к любой пицце: пармезан,
+                    курицу, ананас, карри и многое другое. Придумайте собственный кулинарный шедевр, а наш курьерская доставка
+                    привезет его Вам. Почувствуйте себя шеф-поваром!</p>
+                </div>
+                <PictureText src={'/assets/img/Screenshot_9.png'} width={184} height={185}>
+                    Минимальная стоимость зааза для доставки от 599 рублей
+                </PictureText>
+            </ContainerInside>
+
+            <div className={'m_all'}>
+                <b>Бесплатная доставка от пиццерии Pizza - быстро и очень выгодно!</b>
+            </div>
+
+            <ContainerInside>
+                <div className={'container_child_box'}>
+                    <p>Вы все правильно поняли: Вы получите заказанные блюда горячими, ведь доставка пиццы осуществляется с
+                    поразительной скоростью (не более 35 минут);
+                    </p>
+                    <p>
+                    Pizza использует только свежие ингредиенты, из которых пиццмейкеры готовят пиццу по проверенным рецептам,
+                    поэтому лакомство придется Вам по вкусу; доставка пиццы будет бесплатной, и это никак не отразится на высоком качестве
+                    Ваших любимых блюд. Для того чтобы заказать пиццу на дом, добавьте в «Корзину» понравившийся вариант и оформите заказ на
+                    сайте пиццерии.
+                    </p>
+                </div>
+                <PictureText src={'/assets/img/Frame 2159.png'} width={184} height={185}>Доставим заказ до 35 минут</PictureText>
+            </ContainerInside>
+        </ContainerTitle>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Description/index.ts b/components/customer/pages/index/block/Description/index.ts
new file mode 100644
index 0000000..221ea3e
--- /dev/null
+++ b/components/customer/pages/index/block/Description/index.ts
@@ -0,0 +1 @@
+export * from './Description'
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Footer/Footer.tsx b/components/customer/pages/index/block/Footer/Footer.tsx
new file mode 100644
index 0000000..537ed58
--- /dev/null
+++ b/components/customer/pages/index/block/Footer/Footer.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  return (
+    <div className={'footer'}>
+            <div className={classNames('footer_block footer_feedback')} >
+                <p className={'description'}>
+                    <a className={'footer_link'} href="#"><span>feedback@pizzapizza.ru</span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_compound')} >
+                <p className={'description'}>
+                    <a href="#" className={'footer_link'}> <span>Калорийность и состав </span></a>
+                </p>
+            </div>
+            <div className={classNames('footer_block footer_about')} >
+                <p className={'description'}>
+                    <span>2022 © Pizza&Pizza</span>
+                </p>
+            </div>
+        </div>
+  );
+};
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Footer/FooterNav.tsx b/components/customer/pages/index/block/Footer/FooterNav.tsx
new file mode 100644
index 0000000..7808f8e
--- /dev/null
+++ b/components/customer/pages/index/block/Footer/FooterNav.tsx
@@ -0,0 +1,39 @@
+export const FooterNav: React.FC = () => {
+    return (
+        <div className='container'>
+             <hr/>
+            <div className="footer_nav container_main">
+                <div className="contain_left" >
+                    <div className="col">
+                        <p>Pizza</p>
+                        <ul>
+                            <li>Кто мы</li>
+                            <li>Работа в Pizza</li>
+                            <li>Новости</li>
+                            <li>Вопросы</li>
+                            <li>Правовая информация</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Для партнёров</p>
+                        <ul>
+                            <li>Франчайзинг</li>
+                            <li>Поставщикам</li>
+                        </ul>
+                    </div>
+                    <div className="col">
+                        <p>Контакты</p>
+                        <ul>
+                            <li>Связь с нами</li>
+                            <li>Служба поддержки</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="telephone">
+                    <h2>8 (999) 99-99-99</h2>
+                    <p>Звонок бесплатный</p>
+                </div>
+            </div>
+        </div>
+    )
+  };
diff --git a/components/customer/pages/index/block/Footer/index.ts b/components/customer/pages/index/block/Footer/index.ts
new file mode 100644
index 0000000..ef1a22e
--- /dev/null
+++ b/components/customer/pages/index/block/Footer/index.ts
@@ -0,0 +1,2 @@
+export * from './Footer'
+export * from './FooterNav'
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Header/Header.tsx b/components/customer/pages/index/block/Header/Header.tsx
new file mode 100644
index 0000000..e8a2c82
--- /dev/null
+++ b/components/customer/pages/index/block/Header/Header.tsx
@@ -0,0 +1,90 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from "next/link";
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+
+//import { Search } from './search';
+//import { selectCart } from '../../redux/cart/selectors';
+
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  React.useEffect(() => {
+  //  const pageWidth = document.documentElement.clientWidth
+ //   const pageHeight = document.documentElement.scrollHeight
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ //   console.log(pageWidth, 'pageWidth');
+ //   console.log(pageHeight, 'pageHeight');
+  }, [1]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        <p>Logo</p>
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon icon={faLocationDot} className={'icon_address'}/>
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <p className={classNames('phone entrance_link')}>8(999)-999-99-99</p>
+            <span className={"entrance_link calk"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+              <FontAwesomeIcon
+                icon={faBasketShopping}
+                className={'basket'}
+              />
+            </i>
+            <Link href="/?cart=open" as="/cart" className={classNames('link entrance_link')}>
+              Корзина
+            </Link>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/components/customer/pages/index/block/Header/index.ts b/components/customer/pages/index/block/Header/index.ts
new file mode 100644
index 0000000..220d1b1
--- /dev/null
+++ b/components/customer/pages/index/block/Header/index.ts
@@ -0,0 +1 @@
+export * from './Header'
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Motto/index.tsx b/components/customer/pages/index/block/Motto/index.tsx
new file mode 100644
index 0000000..36688b6
--- /dev/null
+++ b/components/customer/pages/index/block/Motto/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const MottoBlock: React.FC = () => {
+  return (
+      <div className='box_fix'>
+        <div className="title_header">
+            <div className="title_header_box">
+                <div className={'icon_fire'}> </div>
+                <h2 className="typography_h1"> Горячая пицца для каждого  </h2>
+            </div>
+            <div className="title_header_box">
+                <div className={'icon_moped'}> </div>
+                <h2 className="typography_h1"> Долетим за 35 минут </h2>
+            </div>
+        </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Pizza/Pizza.tsx b/components/customer/pages/index/block/Pizza/Pizza.tsx
new file mode 100644
index 0000000..a82db95
--- /dev/null
+++ b/components/customer/pages/index/block/Pizza/Pizza.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import {ButtonImg, Button } from '../../../../../UI';
+import classNames from 'classnames';
+
+type PizzaBlockProps = {
+  id: number;
+  title: string;
+  price: number[];
+  description: string;
+  img: string[];
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  img,
+  price,
+  description,
+}) => {
+
+  const onClickAdd = () => {
+    console.log('ok');
+  };
+
+  return (
+        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
+          <li className={classNames("pizza_item pizza_card")} >
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[0]+'.jpg'}
+                    alt={title}
+                    width={400}
+                    height={400}
+                />
+            </div>
+            <span className={'product_card_box'} >
+                <h3>{title}</h3>
+                <p className={'product_card_text'}>{description}</p>
+            </span>
+            <span className={'product_card_video'}>
+                <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
+              </span>
+            <span className={'footer_box'}>
+              <span className={'product_card_footer'}>
+                <p className={'product_card_price'}>от {price[0]} руб</p>
+                  <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
+              </span>
+            </span>
+          </li>
+        </Link>
+  );
+};
+
+
diff --git a/components/customer/pages/index/block/Pizza/Skeleton.tsx b/components/customer/pages/index/block/Pizza/Skeleton.tsx
new file mode 100644
index 0000000..02cdc61
--- /dev/null
+++ b/components/customer/pages/index/block/Pizza/Skeleton.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const PizzaSkeleton = () => (
+  <ContentLoader
+    className={classNames("vendor-item product_card")}
+    speed={2}
+    width={300}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="130" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="150" />
+  </ContentLoader>
+);
diff --git a/components/customer/pages/index/block/Pizza/index.ts b/components/customer/pages/index/block/Pizza/index.ts
new file mode 100644
index 0000000..803c932
--- /dev/null
+++ b/components/customer/pages/index/block/Pizza/index.ts
@@ -0,0 +1,2 @@
+export * from './Pizza';
+export * from './Skeleton';
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Pizza/styles/index.scss b/components/customer/pages/index/block/Pizza/styles/index.scss
new file mode 100644
index 0000000..cda2198
--- /dev/null
+++ b/components/customer/pages/index/block/Pizza/styles/index.scss
@@ -0,0 +1,134 @@
+.pizza_card{
+    /*height: 630px;*/
+    float: left;
+    position: static;
+    text-align: center;
+    border:1px solid hsl(0, 0%, 100%);
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    display: flex;
+    flex-flow: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 60px;
+    cursor: pointer;
+
+    .img {
+      margin: 0px;
+      position: relative;
+      width: 100%;
+      border-radius: 12px;
+      top: 0px;
+      transition: top 150ms ease-out 0s;
+
+      user-select: none;
+      image-rendering: auto;
+      flex-flow: column;
+    }
+
+    .product_card_box{
+      text-align: left;
+      margin: 8px 0px;
+      line-height: 24px;
+      font-weight: 500;
+      display: contents;
+      h3{
+        margin-bottom: 5px;
+      }
+      .product_card_text{
+        flex: auto;
+      }
+
+    }
+
+
+    .footer_box{
+      margin-top: 16px;
+      display: flex;
+    }
+
+    .product_card_footer{
+      display: table;
+      width: 100%;
+    }
+
+    .product_card_price{
+      float: left;
+      position: static;
+      display: flex;
+      margin: 10px 10px;
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .product_card_video{
+      width: 100%;
+    }
+
+}
+
+.pizza_item:hover {
+ /* margin-top: -4px;
+  margin-bottom: 24px;*/
+}
+
+.pizza_card:hover {
+  border:1px solid #d6d6d6;
+  filter:blur(0px);
+  opacity:1;
+  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
+}
+
+.pictureText_text{
+    display: block;
+    text-align: left;
+}
+
+.product_card_img{
+    text-align: center;
+}
+
+
+
+
+
+@media (min-width: 640px) {
+  .pizza_item {
+   /* margin: 0 20px 20px 0; */
+    box-shadow: 0 0 0 0 rgba(227, 228, 230, 0);
+  }
+  .pizza_item:hover .pizza_item_link {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 7px 19px -1px rgba(172, 172, 179, 0.3);
+  }
+}
+
+@media (min-width: 640px) and (min-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 4 - (20px * 3 / 4));
+  }
+  .pizza_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) and (max-width: 1600px) {
+  .pizza_item {
+    width: calc(100% / 2 - (20px * 2 / 3));
+  }
+  .pizza_item:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 640px) and (min-width: 768px) {
+  .pizza_item {
+    transition: 0.2s;
+  }
+
+  .pizza_item:hover .vendor-fave__btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Stock/Skeleton.tsx b/components/customer/pages/index/block/Stock/Skeleton.tsx
new file mode 100644
index 0000000..5cdbf2b
--- /dev/null
+++ b/components/customer/pages/index/block/Stock/Skeleton.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);
diff --git a/components/customer/pages/index/block/Stock/Stock.tsx b/components/customer/pages/index/block/Stock/Stock.tsx
new file mode 100644
index 0000000..be2146d
--- /dev/null
+++ b/components/customer/pages/index/block/Stock/Stock.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    id: number;
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CardStock: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <div className={classNames('card_stock', color)}>
+            <div className={'title_box'}>
+                <p className={'title'}>{title_one}</p>
+                <p className={'title'}>{title_two}</p>
+            </div>
+            <div className = {classNames('img', img)}/>
+            <div className={'sale_box'}>
+                <p>{sale}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/block/Stock/index.ts b/components/customer/pages/index/block/Stock/index.ts
new file mode 100644
index 0000000..711c11d
--- /dev/null
+++ b/components/customer/pages/index/block/Stock/index.ts
@@ -0,0 +1,2 @@
+export * from './Stock';
+export * from './Skeleton';
\ No newline at end of file
diff --git a/components/customer/pages/index/block/index.ts b/components/customer/pages/index/block/index.ts
new file mode 100644
index 0000000..dfbf4fb
--- /dev/null
+++ b/components/customer/pages/index/block/index.ts
@@ -0,0 +1,8 @@
+export * from './Categories'
+export * from './Description'
+export * from './Motto'
+export * from './Pizza'
+export * from './Stock'
+export * from './Header'
+export * from './Footer'
+export * from './DeliveryArea'
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/cardAdditionally.tsx b/components/customer/pages/index/modals/cart/cardAdditionally.tsx
new file mode 100644
index 0000000..52bd731
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/cardAdditionally.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        <div className={'card_additionally_box'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/cardBasketProduct.tsx b/components/customer/pages/index/modals/cart/cardBasketProduct.tsx
new file mode 100644
index 0000000..0c69714
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/cardBasketProduct.tsx
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className = {'card_basket_product_img'}>
+                <Image
+                    className = {'pictureText_img'}
+                    src={src}
+                    alt={alt}
+                    width={63}
+                    height={60}
+                />
+            </div>
+            <div className={'card_basket_product_box_title'}>
+                <p className={'card_basket_product_title'}>{title_name}</p>
+                <p className={'card_basket_product_size'}>{title_size}</p>
+            </div>
+
+           <div className={'card_basket_product_sale_box_button'}>
+                <button className='card_basket_product_button'>-</button>
+                <p className='card_basket_product_count'>{countProduct}</p>
+                <button className='card_basket_product_button'>+</button>
+           </div>
+
+           <div className={'card_basket_product_sale_box_price'}>
+                <p className='card_basket_product_price'>{price} ₽</p>
+           </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/content.tsx b/components/customer/pages/index/modals/cart/content.tsx
new file mode 100644
index 0000000..dca7719
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/content.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/components/customer/pages/index/modals/cart/index.ts b/components/customer/pages/index/modals/cart/index.ts
new file mode 100644
index 0000000..509e878
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/index.ts
@@ -0,0 +1,4 @@
+export * from './content'
+export * from './pizzaCart'
+export * from './cardBasketProduct'
+export * from './cardAdditionally'
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/pizzaCart.tsx b/components/customer/pages/index/modals/cart/pizzaCart.tsx
new file mode 100644
index 0000000..1e114fc
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/pizzaCart.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <Modal styles={'cart'} position={''}>
+      {
+        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
+      }
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/index.ts b/components/customer/pages/index/modals/index.ts
new file mode 100644
index 0000000..62bb833
--- /dev/null
+++ b/components/customer/pages/index/modals/index.ts
@@ -0,0 +1,2 @@
+export * from './pizza'
+export * from './cart'
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/content.tsx b/components/customer/pages/index/modals/pizza/content.tsx
new file mode 100644
index 0000000..c13d6c8
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/content.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { HiMinus, HiPlus } from "react-icons/hi";
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContent: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    const [activeType, setActiveType] = useState(0);
+    const [activeSize, setActiveSize] = useState(1);
+    const [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
+    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+    const ing = [{name:'onion', title:'Лук', price:6},
+                {name:'tomato', title:'Томаты', price:16},
+                {name:'cheese', title:'Сыр', price:20},
+                {name:'mushroom', title:'Грибы', price:10},
+                {name:'bacon', title:'Бекон', price:30},
+                {name:'pineapple', title:'Ананас', price:30},
+                {name:'pickles', title:'Огурчик', price:6},
+                {name:'jalapeno', title:'Халапенью', price:6}];
+
+    const [check, setCheck] = useState<Array<string>>([]);
+
+    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        const button = event.currentTarget.value as any;
+        console.log(button);
+        setCheck({...check, [button]: check[button as unknown as number] === 'none_ing' ? 'yellow_ing' : 'none_ing'});
+        if (check[button as unknown as number]==='none') {
+            setSum(sum-ing[button as unknown as number].price);
+        } else {
+            setSum(sum+ing[button as unknown as number].price);
+        }
+    }
+
+    useEffect(() => {
+        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
+        setCheck([]);
+        setSum(price[activeSize] as unknown as number);
+      }, [activeSize, activeType, heft, price]);
+
+  return (
+    <>
+        <div className='left'>
+            <div className='img'>
+                <Image
+                    src={'/assets/img/'+img[activeSize]+'.jpg'}
+                    alt={'pizza'}
+                    width={400}
+                    height={400}
+                />
+            </div>
+        </div>
+        <div className='right'>
+            <div className="header">
+                <h3 className="title">{title}</h3>
+                <p className="feature">{feature}</p>
+                <p className="description">{description}</p>
+                <div className="block_selector">
+                    <ul>
+                    {types.map((typeId) => (
+                        <li
+                            key={typeId}
+                            onClick={() => setActiveType(typeId)}
+                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
+                            {typeNames[typeId]}
+                        </li>
+                    ))}
+                    </ul>
+                    <ul>
+                    {sizes.map((size, i) => (
+                        <li
+                            key={size}
+                            onClick={() => setActiveSize(i)}
+                            className={activeSize === i ? classNames('active size') : classNames('size')}>
+                            {size} см
+                        </li>
+                    ))}
+                    </ul>
+                </div>
+                <div className='ingredients'>
+                    <ul className='ul'> {ing.map((obj, count) =>
+                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
+                            <div className={classNames('text_box ' + (check[count] === 'none_ing' ? 'yellow_ing' : 'none_ing'))} >
+                                <div className={classNames('img_ing ' + obj.name)}> </div>
+                                <p className='title_ing'>{obj.title}</p>
+                                <p className='price_ing'>{obj.price} p</p>
+                                <div className={'button_ing'}>{check[count] === 'none_ing' ? <HiMinus/> : <HiPlus/>} </div>
+                            </div>
+                        </li> )}
+                    </ul>
+                </div>
+                <div className='modal_footer'>
+                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
+                        onClick={addBasket}>В корзину за {sum} р</button>
+                    <Link href={"/"} as={"/"} scroll={false}>
+                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
+                    </Link>
+                </div>
+            </div>
+        </div>
+        </>
+  );
+};
+
+
diff --git a/components/customer/pages/index/modals/pizza/index.ts b/components/customer/pages/index/modals/pizza/index.ts
new file mode 100644
index 0000000..055a5be
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/index.ts
@@ -0,0 +1,2 @@
+export * from './content'
+export * from './pizzaCard'
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/pizzaCard.tsx b/components/customer/pages/index/modals/pizza/pizzaCard.tsx
new file mode 100644
index 0000000..51f50f7
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/pizzaCard.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import classNames from 'classnames';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContent } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCard: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_card'>
+            <div className='dialog'>
+                <div className='content'>
+                    <div className='body'>
+                      {pizza}
+                    </div>
+                </div>
+            </div>
+      </div>
+  );
+};
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/styles/_block_selector.scss b/components/customer/pages/index/modals/pizza/styles/_block_selector.scss
new file mode 100644
index 0000000..e30c5d1
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/styles/_block_selector.scss
@@ -0,0 +1,58 @@
+.block {
+    display: block ruby;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    &_selector {
+        -moz-transition: border 250ms, color 250ms;
+        -o-transition: border 250ms, color 250ms;
+        -webkit-transition: border 250ms, color 250ms;
+        transition: border 250ms, color 250ms;
+        cursor: pointer;
+
+      ul {
+        margin-left: -25px;
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+        li {
+            padding: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            display: table-cell;
+            height: 24px;
+            vertical-align: middle;
+            text-align: center;
+            position: relative;
+            padding-left: 8px;
+            padding-right: 8px;
+            border-radius: 32px;
+
+            &.active {
+                background: #FED11E;
+                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+                cursor: auto;
+            }
+
+            &.size{
+                width: 60px;
+                height: 32px;
+                border-radius: 8px;
+            }
+
+            &.type{
+                width: 178px;
+                height: 24px;
+                border-radius: 12px;
+                -webkit-border-radius: 12px;
+                -moz-border-radius: 12px;
+                -ms-border-radius: 12px;
+                -o-border-radius: 12px;
+            }
+          }
+        }
+      }
+    }
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/styles/_ingredients.scss b/components/customer/pages/index/modals/pizza/styles/_ingredients.scss
new file mode 100644
index 0000000..a662637
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/styles/_ingredients.scss
@@ -0,0 +1,102 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    height: 250px;
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+      
+
+    
+
+
+
+    
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+ 
+}
+
+
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/styles/_products.scss b/components/customer/pages/index/modals/pizza/styles/_products.scss
new file mode 100644
index 0000000..b491855
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/styles/_products.scss
@@ -0,0 +1,31 @@
+.onion{
+    background: url('/assets/img/onion.png') 100% 100% no-repeat;
+}
+
+.bacon{
+    background: url('/assets/img/bacon.png') 100% 100% no-repeat;
+}
+
+.cheese{
+    background: url('/assets/img/cheese.png') 100% 100% no-repeat;
+}
+
+.jalapeno{
+    background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
+}
+
+.mushroom{
+    background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
+}
+
+.pickles{
+    background: url('/assets/img/pickles.png') 100% 100% no-repeat;
+}
+
+.pineapple{
+    background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
+}
+
+.tomato{
+    background: url('/assets/img/tomato.png') 100% 100% no-repeat;
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/styles/index.scss b/components/customer/pages/index/modals/pizza/styles/index.scss
new file mode 100644
index 0000000..e6d62b0
--- /dev/null
+++ b/components/customer/pages/index/modals/pizza/styles/index.scss
@@ -0,0 +1,141 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 533px;
+      width: 900px;
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        border-radius: 20px;
+        /*border: 1px solid #888;*/
+        .body{
+          height: 100%;
+          flex-wrap: wrap;
+          display: flex;
+  
+          .left{
+           /* margin: 0 auto;*/
+            float: left;
+            position: static;
+            display: flex;
+            justify-content: center; /*Центрирование по горизонтали*/
+            align-items: center;     /*Центрирование по вертикали */
+            width: 400px;
+  
+            .img{
+              text-align: center;
+              height: 100%;
+              display: grid;;
+              justify-content: center; /*Центрирование по горизонтали*/
+              align-items: center;     /*Центрирование по вертикали */
+            }
+          }
+  
+          .right{
+            background: #F7F7F7;
+            width: 450px;
+            display: table;
+            float: left;
+            position: static;
+
+            .header{
+              height: 450px;
+              letter-spacing: 0.02em;
+
+              .title{
+                font-size: 20px;
+                line-height: 24px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              .feature{
+                font-size: 13px;
+                line-height: 15px;
+                margin: 10px 10px 10px 15px;
+                color: #8E8E93;
+              }
+
+              .description{
+                font-size: 13px;
+                line-height: 15px;
+                color: #252A48;
+                margin: 10px 10px 10px 15px;
+              }
+              /* Блок переключения */
+              @import 'block_selector';
+              @import 'ingredients';
+            }
+          }
+        }
+      }
+    }
+
+    .modal_footer{
+      display: table;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+  
+    
+  
+   
+  
+  
+    /* The Close Button */
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  
+    .close:hover,
+      .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  .position_product{
+  padding-top: 100px;
+   /* padding-top: 100px; 
+   right: 0;
+   left: unset !important;
+   position: absolute;*/
+  }
+  
+  
+  @media (max-width: 940px) {
+    .pizza_modal_card {
+      height: 1010px;
+      width: 100vw;
+      max-width: 400px;
+    }
+    .pizza_modal_card{
+        padding-top: 5px;
+    }
+  }
+  
+ 
\ No newline at end of file
diff --git a/components/customer/search/index.tsx b/components/customer/search/index.tsx
new file mode 100644
index 0000000..7cbd19b
--- /dev/null
+++ b/components/customer/search/index.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};
diff --git a/components/index.ts b/components/index.ts
new file mode 100644
index 0000000..28f0d38
--- /dev/null
+++ b/components/index.ts
@@ -0,0 +1,2 @@
+export * from './customer/containers/BoxScroll';
+export * from './customer/containers/Box';
\ No newline at end of file
diff --git a/layouts/Customer/MainLayout.tsx b/layouts/Customer/MainLayout.tsx
new file mode 100644
index 0000000..af0bc0b
--- /dev/null
+++ b/layouts/Customer/MainLayout.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Header, Footer, FooterNav } from '../../components/customer/pages/index/block';
+
+type Props = { children: React.ReactNode };
+
+export const MainLayout: React.FC<Props> = ({children}) => {
+  return (
+    <div className="wrapper">
+      <Header/>
+      <div className="content">
+        {children}
+        <FooterNav/>
+        <Footer/>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/layouts/Customer/index.ts b/layouts/Customer/index.ts
new file mode 100644
index 0000000..7411a7e
--- /dev/null
+++ b/layouts/Customer/index.ts
@@ -0,0 +1 @@
+export * from './MainLayout';
\ No newline at end of file
diff --git a/lib/session.js b/lib/session.js
new file mode 100644
index 0000000..3585dee
--- /dev/null
+++ b/lib/session.js
@@ -0,0 +1,39 @@
+async function getAuthSession(ctx) {
+    return ctx.req.session.get("user");
+  }
+
+  // pages/protected/protected-route.js
+  const ProtectedSSRoute = ({ authenticated, user }) => {
+    if (!authenticated) {
+      return (
+        <div>
+          <span>You are not authenticated :(</span>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <span>You are authenticated as: {user} :)</span>
+      </div>
+    );
+  };
+
+  export function getServerSideProps(ctx) {
+    const authSession = getAuthSession(ctx);
+    if (!authSession) {
+      return {
+        props: {
+          authenticated: false,
+        },
+      };
+    }
+
+    return {
+      props: {
+        authenticated: true,
+        user: authSession.user,
+      },
+    };
+  }
+
+  export default ProtectedSSRoute;
\ No newline at end of file
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..a843cbe
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/next.js b/next.js
new file mode 100644
index 0000000..b4fe0fd
--- /dev/null
+++ b/next.js
@@ -0,0 +1,4 @@
+Router.push({
+    pathname: '/home',
+    query: { name: 'Someone' }
+})
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b30edef
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6781 @@
+{
+  "name": "site2.0",
+  "version": "0.1.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "site2.0",
+      "version": "0.1.0",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@reduxjs/toolkit": "^1.8.1",
+        "@types/lodash": "^4.14.182",
+        "@types/react-loadable": "^5.5.6",
+        "axios": "^0.27.2",
+        "classnames": "^2.3.1",
+        "cookies-next": "^2.0.4",
+        "iron-session": "^6.1.3",
+        "lodash": "^4.17.21",
+        "lodash.debounce": "^4.0.8",
+        "mysql2": "^2.3.3",
+        "next": "12.1.6",
+        "pbkdf2": "^3.1.2",
+        "qs": "^6.10.3",
+        "react": "18.1.0",
+        "react-content-loader": "^6.2.0",
+        "react-dom": "18.1.0",
+        "react-icons": "^4.4.0",
+        "react-loadable": "^5.5.0",
+        "react-redux": "^8.0.1",
+        "react-router-dom": "^6.3.0",
+        "sass": "^1.51.0"
+      },
+      "devDependencies": {
+        "@types/mysql": "github:types/mysql",
+        "@types/node": "17.0.33",
+        "@types/qs": "^6.9.7",
+        "@types/react": "18.0.9",
+        "@types/react-dom": "^18.0.4",
+        "dotenv": "^16.0.1",
+        "eslint": "8.15.0",
+        "eslint-config-next": "12.1.6",
+        "typescript": "4.6.4"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.17.9.tgz",
+      "integrity": "sha512-WxYHHUWF2uZ7Hp1K+D1xQgbgkGUfA+5UPOegEXGt2Y5SMog/rYCVaifLZDbw8UkNXozEqqrZTy6bglL7xTaCOw==",
+      "dev": true,
+      "dependencies": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz",
+      "integrity": "sha512-uGo44hIwoLGNyduRpjdEpovcbMdd+Nv7amtmJxnKmI8xj6yd5LncmSwDa5NgX/41lIFJtkjD6YdVfgEzPfJ5UA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.9.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
+    "node_modules/@hapi/b64": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/b64/-/b64-5.0.0.tgz",
+      "integrity": "sha512-ngu0tSEmrezoiIaNGG6rRvKOUkUuDdf4XTPnONHGYfSGRmDqPZX5oJL6HAdKTo1UQHECbdB4OzhWrfgVppjHUw==",
+      "dependencies": {
+        "@hapi/hoek": "9.x.x"
+      }
+    },
+    "node_modules/@hapi/boom": {
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-9.1.4.tgz",
+      "integrity": "sha512-Ls1oH8jaN1vNsqcaHVYJrKmgMcKsC1wcp8bujvXrHaAqD2iDYq3HoOwsxwo09Cuda5R5nC0o0IxlrlTuvPuzSw==",
+      "dependencies": {
+        "@hapi/hoek": "9.x.x"
+      }
+    },
+    "node_modules/@hapi/bourne": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-2.1.0.tgz",
+      "integrity": "sha512-i1BpaNDVLJdRBEKeJWkVO6tYX6DMFBuwMhSuWqLsY4ufeTKGVuV5rBsUhxPayXqnnWHgXUAmWK16H/ykO5Wj4Q=="
+    },
+    "node_modules/@hapi/cryptiles": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/cryptiles/-/cryptiles-5.1.0.tgz",
+      "integrity": "sha512-fo9+d1Ba5/FIoMySfMqPBR/7Pa29J2RsiPrl7bkwo5W5o+AN1dAYQRi4SPrPwwVxVGKjgLOEWrsvt1BonJSfLA==",
+      "dependencies": {
+        "@hapi/boom": "9.x.x"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "node_modules/@hapi/iron": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/iron/-/iron-6.0.0.tgz",
+      "integrity": "sha512-zvGvWDufiTGpTJPG1Y/McN8UqWBu0k/xs/7l++HVU535NLHXsHhy54cfEMdW7EjwKfbBfM9Xy25FmTiobb7Hvw==",
+      "dependencies": {
+        "@hapi/b64": "5.x.x",
+        "@hapi/boom": "9.x.x",
+        "@hapi/bourne": "2.x.x",
+        "@hapi/cryptiles": "5.x.x",
+        "@hapi/hoek": "9.x.x"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/@next/env": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
+      "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA=="
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz",
+      "integrity": "sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==",
+      "dev": true,
+      "dependencies": {
+        "glob": "7.1.7"
+      }
+    },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
+      "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
+      "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
+      "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
+      "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
+      "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
+      "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
+      "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
+      "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
+      "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
+      "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
+      "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz",
+      "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.1.tgz",
+      "integrity": "sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==",
+      "dependencies": {
+        "immer": "^9.0.7",
+        "redux": "^4.1.2",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.0-beta"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
+      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
+      "dev": true
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "node_modules/@types/mysql": {
+      "version": "2.0.0",
+      "resolved": "git+ssh://git@github.com/types/mysql.git#c26b1bc2bac17010081455e3127a90fb2eafcec9",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@types/node": {
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.33.tgz",
+      "integrity": "sha512-miWq2m2FiQZmaHfdZNcbpp9PuXg34W5JZ5CrJ/BaS70VuhoJENBEQybeiYSaPBRNq6KQGnjfEnc/F3PN++D+XQ=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
+      "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
+      "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-loadable": {
+      "version": "5.5.6",
+      "resolved": "https://registry.npmjs.org/@types/react-loadable/-/react-loadable-5.5.6.tgz",
+      "integrity": "sha512-2M7xH/wawZxNybbs/a76JkpUsMk4z6AxBh92cUtIBy2vK7EYYuitQbC4laY0hGz0e05R+mQ44YeHMtH2U+gMsw==",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/webpack": "^4"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/source-list-map": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
+      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
+    },
+    "node_modules/@types/tapable": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
+      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ=="
+    },
+    "node_modules/@types/uglify-js": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.2.tgz",
+      "integrity": "sha512-/xFrPIo+4zOeNGtVMbf9rUm0N+i4pDf1ynExomqtokIJmVzR3962lJ1UE+MmexMkA0cmN9oTzg5Xcbwge0Ij2Q==",
+      "dependencies": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
+    "node_modules/@types/webpack": {
+      "version": "4.41.32",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
+      "integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tapable": "^1",
+        "@types/uglify-js": "*",
+        "@types/webpack-sources": "*",
+        "anymatch": "^3.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/@types/webpack-sources": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
+      "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/source-list-map": "*",
+        "source-map": "^0.7.3"
+      }
+    },
+    "node_modules/@types/webpack-sources/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz",
+      "integrity": "sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/typescript-estree": "5.23.0",
+        "debug": "^4.3.2"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz",
+      "integrity": "sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz",
+      "integrity": "sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz",
+      "integrity": "sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0",
+        "debug": "^4.3.2",
+        "globby": "^11.0.4",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz",
+      "integrity": "sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.23.0",
+        "eslint-visitor-keys": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
+      "dev": true
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axe-core": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
+      "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
+      "dev": true
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001341",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz",
+      "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookies-next": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-2.0.4.tgz",
+      "integrity": "sha512-fqjwJNksW/WEu8ou1SEXJCKYyg7nrQRsjlfbIF5tp96SrQq1Fzome1To27tPxhoPN/vgFuzCt573Pri9bE+H+g==",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/node": "^16.10.2",
+        "cookie": "^0.4.0"
+      }
+    },
+    "node_modules/cookies-next/node_modules/@types/node": {
+      "version": "16.11.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.36.tgz",
+      "integrity": "sha512-FR5QJe+TaoZ2GsMHkjuwoNabr+UrJNRr2HNOo+r/7vhcuntM6Ee/pRPOnRhhL2XE9OOvX9VLEq+BcXl3VjNoWA=="
+    },
+    "node_modules/core-js-pure": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz",
+      "integrity": "sha512-8xo9R00iYD7TcV7OrC98GwxiUEAabVWO3dix+uyWjnYrx9fyASLlIX+f/3p5dW5qByaP2bcZ8X/T47s55et/tA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "dependencies": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      }
+    },
+    "node_modules/create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "dependencies": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/denque": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.0.1.tgz",
+      "integrity": "sha512-tfiWc6BQLXNLpNiR5iGd0Ocu3P3VpxfzFiqubLgMfhfOw9WyvgJBd46CClNn9k3qfbjvT//0cf7AlYRX/OslMQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
+      "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/es-abstract": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.0.tgz",
+      "integrity": "sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.4.1",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.15.0.tgz",
+      "integrity": "sha512-GG5USZ1jhCu8HJkzGgeK8/+RGnHaNYZGrGDzUtigK3BsGESW/rs2az23XqE0WVwDxy1VRvvjSSGu5nB0Bu+6SA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/eslintrc": "^1.2.3",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.2",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.6.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.6.tgz",
+      "integrity": "sha512-qoiS3g/EPzfCTkGkaPBSX9W0NGE/B1wNO3oWrd76QszVGrdpLggNqcO8+LR6MB0CNqtp9Q8NoeVrxNVbzM9hqA==",
+      "dev": true,
+      "dependencies": {
+        "@next/eslint-plugin-next": "12.1.6",
+        "@rushstack/eslint-patch": "^1.1.3",
+        "@typescript-eslint/parser": "^5.21.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^2.7.1",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.5.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0",
+        "next": ">=10.2.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
+      "integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "glob": "^7.2.0",
+        "is-glob": "^4.0.3",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
+      "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.16.3",
+        "aria-query": "^4.2.2",
+        "array-includes": "^3.1.4",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.3.5",
+        "axobject-query": "^2.2.0",
+        "damerau-levenshtein": "^1.0.7",
+        "emoji-regex": "^9.2.2",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.2.1",
+        "language-tags": "^1.0.5",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.29.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
+      "integrity": "sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flatmap": "^1.2.5",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.0",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.6"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.3",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
+      "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
+      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
+      "dev": true
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "dependencies": {
+        "is-property": "^1.0.2"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz",
+      "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "9.0.14",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
+      "integrity": "sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/iron-session": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/iron-session/-/iron-session-6.1.3.tgz",
+      "integrity": "sha512-o5ErwzAtTBKPtxo4nDmxOZAjK4Stku//5sFM0vac3/Px34530gTwnXoa8zwsC4/koqCtKY0yC0KF/1K+ZMGuHA==",
+      "dependencies": {
+        "@hapi/iron": "^6.0.0",
+        "@types/cookie": "^0.5.1",
+        "@types/express": "^4.17.13",
+        "@types/node": "^16.11.7",
+        "cookie": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "express": ">=4",
+        "next": ">=10"
+      },
+      "peerDependenciesMeta": {
+        "express": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/iron-session/node_modules/@types/cookie": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
+      "integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g=="
+    },
+    "node_modules/iron-session/node_modules/@types/node": {
+      "version": "16.11.36",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.36.tgz",
+      "integrity": "sha512-FR5QJe+TaoZ2GsMHkjuwoNabr+UrJNRr2HNOo+r/7vhcuntM6Ee/pRPOnRhhL2XE9OOvX9VLEq+BcXl3VjNoWA=="
+    },
+    "node_modules/iron-session/node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz",
+      "integrity": "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.4",
+        "object.assign": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.21",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
+      "integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==",
+      "dev": true
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=",
+      "dev": true,
+      "dependencies": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "dependencies": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/mysql2": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-2.3.3.tgz",
+      "integrity": "sha512-wxJUev6LgMSgACDkb/InIFxDprRa6T95+VEoR+xPvtngtccNH2dGjEB/fVZ8yg1gWv1510c9CvXuJHi5zUm0ZA==",
+      "dependencies": {
+        "denque": "^2.0.1",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.6.3",
+        "long": "^4.0.0",
+        "lru-cache": "^6.0.0",
+        "named-placeholders": "^1.1.2",
+        "seq-queue": "^0.0.5",
+        "sqlstring": "^2.3.2"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/named-placeholders": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz",
+      "integrity": "sha512-wiFWqxoLL3PGVReSZpjLVxyJ1bRqe+KKJVbr4hGs1KWfTZTQyezHFBbuKj9hsizHyGV2ne7EMjHdxEGAybD5SA==",
+      "dependencies": {
+        "lru-cache": "^4.1.3"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/named-placeholders/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/named-placeholders/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "node_modules/next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.1.6.tgz",
+      "integrity": "sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==",
+      "dependencies": {
+        "@next/env": "12.1.6",
+        "caniuse-lite": "^1.0.30001332",
+        "postcss": "8.4.5",
+        "styled-jsx": "5.0.2"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-android-arm-eabi": "12.1.6",
+        "@next/swc-android-arm64": "12.1.6",
+        "@next/swc-darwin-arm64": "12.1.6",
+        "@next/swc-darwin-x64": "12.1.6",
+        "@next/swc-linux-arm-gnueabihf": "12.1.6",
+        "@next/swc-linux-arm64-gnu": "12.1.6",
+        "@next/swc-linux-arm64-musl": "12.1.6",
+        "@next/swc-linux-x64-gnu": "12.1.6",
+        "@next/swc-linux-x64-musl": "12.1.6",
+        "@next/swc-win32-arm64-msvc": "12.1.6",
+        "@next/swc-win32-ia32-msvc": "12.1.6",
+        "@next/swc-win32-x64-msvc": "12.1.6"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^6.0.0 || ^7.0.0",
+        "react": "^17.0.2 || ^18.0.0-0",
+        "react-dom": "^17.0.2 || ^18.0.0-0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.hasown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "dependencies": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "dependencies": {
+        "nanoid": "^3.1.30",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
+      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-content-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.2.0.tgz",
+      "integrity": "sha512-r1dI6S+uHNLW68qraLE2njJYOuy6976PpCExuCZUcABWbfnF3FMcmuESRI8L4Bj45wnZ7n8g71hkPLzbma7/Cw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
+      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.22.0"
+      },
+      "peerDependencies": {
+        "react": "^18.1.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-loadable": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
+      "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
+      "dependencies": {
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz",
+      "integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
+      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
+    },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
+      "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
+    },
+    "node_modules/resolve": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.8.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "dependencies": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/sass": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz",
+      "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
+      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
+    },
+    "node_modules/sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      },
+      "bin": {
+        "sha.js": "bin.js"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sqlstring": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
+      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+      "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.17.9.tgz",
+      "integrity": "sha512-WxYHHUWF2uZ7Hp1K+D1xQgbgkGUfA+5UPOegEXGt2Y5SMog/rYCVaifLZDbw8UkNXozEqqrZTy6bglL7xTaCOw==",
+      "dev": true,
+      "requires": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@eslint/eslintrc": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz",
+      "integrity": "sha512-uGo44hIwoLGNyduRpjdEpovcbMdd+Nv7amtmJxnKmI8xj6yd5LncmSwDa5NgX/41lIFJtkjD6YdVfgEzPfJ5UA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.9.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@hapi/b64": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/b64/-/b64-5.0.0.tgz",
+      "integrity": "sha512-ngu0tSEmrezoiIaNGG6rRvKOUkUuDdf4XTPnONHGYfSGRmDqPZX5oJL6HAdKTo1UQHECbdB4OzhWrfgVppjHUw==",
+      "requires": {
+        "@hapi/hoek": "9.x.x"
+      }
+    },
+    "@hapi/boom": {
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-9.1.4.tgz",
+      "integrity": "sha512-Ls1oH8jaN1vNsqcaHVYJrKmgMcKsC1wcp8bujvXrHaAqD2iDYq3HoOwsxwo09Cuda5R5nC0o0IxlrlTuvPuzSw==",
+      "requires": {
+        "@hapi/hoek": "9.x.x"
+      }
+    },
+    "@hapi/bourne": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-2.1.0.tgz",
+      "integrity": "sha512-i1BpaNDVLJdRBEKeJWkVO6tYX6DMFBuwMhSuWqLsY4ufeTKGVuV5rBsUhxPayXqnnWHgXUAmWK16H/ykO5Wj4Q=="
+    },
+    "@hapi/cryptiles": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/cryptiles/-/cryptiles-5.1.0.tgz",
+      "integrity": "sha512-fo9+d1Ba5/FIoMySfMqPBR/7Pa29J2RsiPrl7bkwo5W5o+AN1dAYQRi4SPrPwwVxVGKjgLOEWrsvt1BonJSfLA==",
+      "requires": {
+        "@hapi/boom": "9.x.x"
+      }
+    },
+    "@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "@hapi/iron": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/iron/-/iron-6.0.0.tgz",
+      "integrity": "sha512-zvGvWDufiTGpTJPG1Y/McN8UqWBu0k/xs/7l++HVU535NLHXsHhy54cfEMdW7EjwKfbBfM9Xy25FmTiobb7Hvw==",
+      "requires": {
+        "@hapi/b64": "5.x.x",
+        "@hapi/boom": "9.x.x",
+        "@hapi/bourne": "2.x.x",
+        "@hapi/cryptiles": "5.x.x",
+        "@hapi/hoek": "9.x.x"
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "@next/env": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
+      "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA=="
+    },
+    "@next/eslint-plugin-next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz",
+      "integrity": "sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.7"
+      }
+    },
+    "@next/swc-android-arm-eabi": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
+      "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
+      "optional": true
+    },
+    "@next/swc-android-arm64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
+      "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
+      "optional": true
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
+      "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
+      "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
+      "optional": true
+    },
+    "@next/swc-linux-arm-gnueabihf": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
+      "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
+      "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
+      "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
+      "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
+      "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
+      "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
+      "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz",
+      "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==",
+      "optional": true
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@reduxjs/toolkit": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.1.tgz",
+      "integrity": "sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==",
+      "requires": {
+        "immer": "^9.0.7",
+        "redux": "^4.1.2",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5"
+      }
+    },
+    "@rushstack/eslint-patch": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
+      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
+      "dev": true
+    },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
+    "@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+    },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "@types/mysql": {
+      "version": "git+ssh://git@github.com/types/mysql.git#c26b1bc2bac17010081455e3127a90fb2eafcec9",
+      "dev": true,
+      "from": "@types/mysql@github:types/mysql"
+    },
+    "@types/node": {
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.33.tgz",
+      "integrity": "sha512-miWq2m2FiQZmaHfdZNcbpp9PuXg34W5JZ5CrJ/BaS70VuhoJENBEQybeiYSaPBRNq6KQGnjfEnc/F3PN++D+XQ=="
+    },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "@types/react": {
+      "version": "18.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
+      "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
+      "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==",
+      "devOptional": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-loadable": {
+      "version": "5.5.6",
+      "resolved": "https://registry.npmjs.org/@types/react-loadable/-/react-loadable-5.5.6.tgz",
+      "integrity": "sha512-2M7xH/wawZxNybbs/a76JkpUsMk4z6AxBh92cUtIBy2vK7EYYuitQbC4laY0hGz0e05R+mQ44YeHMtH2U+gMsw==",
+      "requires": {
+        "@types/react": "*",
+        "@types/webpack": "^4"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/source-list-map": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
+      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
+    },
+    "@types/tapable": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
+      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ=="
+    },
+    "@types/uglify-js": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.2.tgz",
+      "integrity": "sha512-/xFrPIo+4zOeNGtVMbf9rUm0N+i4pDf1ynExomqtokIJmVzR3962lJ1UE+MmexMkA0cmN9oTzg5Xcbwge0Ij2Q==",
+      "requires": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
+    "@types/webpack": {
+      "version": "4.41.32",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
+      "integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
+      "requires": {
+        "@types/node": "*",
+        "@types/tapable": "^1",
+        "@types/uglify-js": "*",
+        "@types/webpack-sources": "*",
+        "anymatch": "^3.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "@types/webpack-sources": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
+      "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
+      "requires": {
+        "@types/node": "*",
+        "@types/source-list-map": "*",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        }
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz",
+      "integrity": "sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/typescript-estree": "5.23.0",
+        "debug": "^4.3.2"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz",
+      "integrity": "sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz",
+      "integrity": "sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz",
+      "integrity": "sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0",
+        "debug": "^4.3.2",
+        "globby": "^11.0.4",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz",
+      "integrity": "sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.23.0",
+        "eslint-visitor-keys": "^3.0.0"
+      }
+    },
+    "acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      }
+    },
+    "array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axe-core": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
+      "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==",
+      "dev": true
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001341",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz",
+      "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA=="
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+    },
+    "cookies-next": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-2.0.4.tgz",
+      "integrity": "sha512-fqjwJNksW/WEu8ou1SEXJCKYyg7nrQRsjlfbIF5tp96SrQq1Fzome1To27tPxhoPN/vgFuzCt573Pri9bE+H+g==",
+      "requires": {
+        "@types/cookie": "^0.4.1",
+        "@types/node": "^16.10.2",
+        "cookie": "^0.4.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.11.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.36.tgz",
+          "integrity": "sha512-FR5QJe+TaoZ2GsMHkjuwoNabr+UrJNRr2HNOo+r/7vhcuntM6Ee/pRPOnRhhL2XE9OOvX9VLEq+BcXl3VjNoWA=="
+        }
+      }
+    },
+    "core-js-pure": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz",
+      "integrity": "sha512-8xo9R00iYD7TcV7OrC98GwxiUEAabVWO3dix+uyWjnYrx9fyASLlIX+f/3p5dW5qByaP2bcZ8X/T47s55et/tA==",
+      "dev": true
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      }
+    },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "requires": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "denque": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.0.1.tgz",
+      "integrity": "sha512-tfiWc6BQLXNLpNiR5iGd0Ocu3P3VpxfzFiqubLgMfhfOw9WyvgJBd46CClNn9k3qfbjvT//0cf7AlYRX/OslMQ=="
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "dotenv": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
+      "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "es-abstract": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.0.tgz",
+      "integrity": "sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.4.1",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
+      }
+    },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true
+    },
+    "eslint": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.15.0.tgz",
+      "integrity": "sha512-GG5USZ1jhCu8HJkzGgeK8/+RGnHaNYZGrGDzUtigK3BsGESW/rs2az23XqE0WVwDxy1VRvvjSSGu5nB0Bu+6SA==",
+      "dev": true,
+      "requires": {
+        "@eslint/eslintrc": "^1.2.3",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.2",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.6.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      }
+    },
+    "eslint-config-next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.6.tgz",
+      "integrity": "sha512-qoiS3g/EPzfCTkGkaPBSX9W0NGE/B1wNO3oWrd76QszVGrdpLggNqcO8+LR6MB0CNqtp9Q8NoeVrxNVbzM9hqA==",
+      "dev": true,
+      "requires": {
+        "@next/eslint-plugin-next": "12.1.6",
+        "@rushstack/eslint-patch": "^1.1.3",
+        "@typescript-eslint/parser": "^5.21.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^2.7.1",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.5.0"
+      }
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-import-resolver-typescript": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
+      "integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4",
+        "glob": "^7.2.0",
+        "is-glob": "^4.0.3",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-jsx-a11y": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
+      "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "aria-query": "^4.2.2",
+        "array-includes": "^3.1.4",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.3.5",
+        "axobject-query": "^2.2.0",
+        "damerau-levenshtein": "^1.0.7",
+        "emoji-regex": "^9.2.2",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.2.1",
+        "language-tags": "^1.0.5",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "eslint-plugin-react": {
+      "version": "7.29.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
+      "integrity": "sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flatmap": "^1.2.5",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.0",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.6"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "resolve": {
+          "version": "2.0.0-next.3",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
+          "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true
+    },
+    "espree": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "dev": true,
+      "requires": {
+        "locate-path": "^2.0.0"
+      }
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
+      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
+      "dev": true
+    },
+    "follow-redirects": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
+    "generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "requires": {
+        "is-property": "^1.0.2"
+      }
+    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.3"
+      }
+    },
+    "globals": {
+      "version": "13.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz",
+      "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.20.2"
+      }
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      }
+    },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
+    "ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true
+    },
+    "immer": {
+      "version": "9.0.14",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
+      "integrity": "sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw=="
+    },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "iron-session": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/iron-session/-/iron-session-6.1.3.tgz",
+      "integrity": "sha512-o5ErwzAtTBKPtxo4nDmxOZAjK4Stku//5sFM0vac3/Px34530gTwnXoa8zwsC4/koqCtKY0yC0KF/1K+ZMGuHA==",
+      "requires": {
+        "@hapi/iron": "^6.0.0",
+        "@types/cookie": "^0.5.1",
+        "@types/express": "^4.17.13",
+        "@types/node": "^16.11.7",
+        "cookie": "^0.5.0"
+      },
+      "dependencies": {
+        "@types/cookie": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
+          "integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g=="
+        },
+        "@types/node": {
+          "version": "16.11.36",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.36.tgz",
+          "integrity": "sha512-FR5QJe+TaoZ2GsMHkjuwoNabr+UrJNRr2HNOo+r/7vhcuntM6Ee/pRPOnRhhL2XE9OOvX9VLEq+BcXl3VjNoWA=="
+        },
+        "cookie": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+        }
+      }
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
+    "json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "jsx-ast-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz",
+      "integrity": "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "object.assign": "^4.1.2"
+      }
+    },
+    "language-subtag-registry": {
+      "version": "0.3.21",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
+      "integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==",
+      "dev": true
+    },
+    "language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=",
+      "dev": true,
+      "requires": {
+        "language-subtag-registry": "~0.3.2"
+      }
+    },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
+    "locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "dev": true,
+      "requires": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "mysql2": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-2.3.3.tgz",
+      "integrity": "sha512-wxJUev6LgMSgACDkb/InIFxDprRa6T95+VEoR+xPvtngtccNH2dGjEB/fVZ8yg1gWv1510c9CvXuJHi5zUm0ZA==",
+      "requires": {
+        "denque": "^2.0.1",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.6.3",
+        "long": "^4.0.0",
+        "lru-cache": "^6.0.0",
+        "named-placeholders": "^1.1.2",
+        "seq-queue": "^0.0.5",
+        "sqlstring": "^2.3.2"
+      }
+    },
+    "named-placeholders": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz",
+      "integrity": "sha512-wiFWqxoLL3PGVReSZpjLVxyJ1bRqe+KKJVbr4hGs1KWfTZTQyezHFBbuKj9hsizHyGV2ne7EMjHdxEGAybD5SA==",
+      "requires": {
+        "lru-cache": "^4.1.3"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.1.6.tgz",
+      "integrity": "sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==",
+      "requires": {
+        "@next/env": "12.1.6",
+        "@next/swc-android-arm-eabi": "12.1.6",
+        "@next/swc-android-arm64": "12.1.6",
+        "@next/swc-darwin-arm64": "12.1.6",
+        "@next/swc-darwin-x64": "12.1.6",
+        "@next/swc-linux-arm-gnueabihf": "12.1.6",
+        "@next/swc-linux-arm64-gnu": "12.1.6",
+        "@next/swc-linux-arm64-musl": "12.1.6",
+        "@next/swc-linux-x64-gnu": "12.1.6",
+        "@next/swc-linux-x64-musl": "12.1.6",
+        "@next/swc-win32-arm64-msvc": "12.1.6",
+        "@next/swc-win32-ia32-msvc": "12.1.6",
+        "@next/swc-win32-x64-msvc": "12.1.6",
+        "caniuse-lite": "^1.0.30001332",
+        "postcss": "8.4.5",
+        "styled-jsx": "5.0.2"
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.entries": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.hasown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
+    "p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dev": true,
+      "requires": {
+        "p-try": "^1.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "dev": true,
+      "requires": {
+        "p-limit": "^1.1.0"
+      }
+    },
+    "p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+      "dev": true
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+    },
+    "postcss": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+      "requires": {
+        "nanoid": "^3.1.30",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "react": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
+      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-content-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-6.2.0.tgz",
+      "integrity": "sha512-r1dI6S+uHNLW68qraLE2njJYOuy6976PpCExuCZUcABWbfnF3FMcmuESRI8L4Bj45wnZ7n8g71hkPLzbma7/Cw==",
+      "requires": {}
+    },
+    "react-dom": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
+      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.22.0"
+      }
+    },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-loadable": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
+      "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
+      "requires": {
+        "prop-types": "^15.5.0"
+      }
+    },
+    "react-redux": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz",
+      "integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.1.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
+          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
+        }
+      }
+    },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "requires": {}
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true
+    },
+    "reselect": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
+      "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
+    },
+    "resolve": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.8.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sass": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz",
+      "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "scheduler": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
+      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
+    },
+    "seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
+    },
+    "sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "sqlstring": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg=="
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "dev": true
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
+    "styled-jsx": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
+      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
+      "requires": {}
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      }
+    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true
+    },
+    "typescript": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "dev": true
+    },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "use-sync-external-store": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+      "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==",
+      "requires": {}
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..38ce99f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "site2.0",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@reduxjs/toolkit": "^1.8.1",
+    "@types/lodash": "^4.14.182",
+    "@types/react-loadable": "^5.5.6",
+    "axios": "^0.27.2",
+    "classnames": "^2.3.1",
+    "cookies-next": "^2.0.4",
+    "iron-session": "^6.1.3",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
+    "mysql2": "^2.3.3",
+    "next": "12.1.6",
+    "pbkdf2": "^3.1.2",
+    "qs": "^6.10.3",
+    "react": "18.1.0",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "18.1.0",
+    "react-icons": "^4.4.0",
+    "react-loadable": "^5.5.0",
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.3.0",
+    "sass": "^1.51.0"
+  },
+  "devDependencies": {
+    "@types/mysql": "github:types/mysql",
+    "@types/node": "17.0.33",
+    "@types/qs": "^6.9.7",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "dotenv": "^16.0.1",
+    "eslint": "8.15.0",
+    "eslint-config-next": "12.1.6",
+    "typescript": "4.6.4"
+  }
+}
diff --git a/pages/[pizza].tsx b/pages/[pizza].tsx
new file mode 100644
index 0000000..0583340
--- /dev/null
+++ b/pages/[pizza].tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+
+export const PizzaMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                    <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default PizzaMod;
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 0000000..c27ea98
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,16 @@
+import '../styles/globals.scss';
+import type { AppProps } from 'next/app';
+import { Provider } from 'react-redux';
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false;
+import { store } from '../redux/store';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (  <Provider store={store}>
+              <Component {...pageProps} />
+            </Provider>
+          )
+}
+
+export default MyApp
diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
new file mode 100644
index 0000000..2a91f8b
--- /dev/null
+++ b/pages/admin/index.tsx
@@ -0,0 +1,39 @@
+import type { NextPage, GetServerSideProps } from 'next';
+import React, { useState, useEffect } from 'react';
+import { DiscordUser } from "../../utils/types";
+
+
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+import { useRouter } from 'next/router'
+import { useSelector } from 'react-redux';
+import { Main } from './main'
+import { Login } from './login';
+
+import { selectTokenData } from '../../redux/login/selectors';
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { token, status_token } = useSelector(selectTokenData);
+  const [login, setLogin] = useState(false);
+
+  useEffect(() => {
+   // token.length ? router.push('/admin/main'): router.push('/admin/login')
+    console.log(status_token, 'token');
+   //setLogin(true);
+
+  });
+
+  return (
+   <></>
+  )
+}
+
+interface Props {
+  user: DiscordUser;
+}
+
+export default Index;
\ No newline at end of file
diff --git a/pages/admin/login.tsx b/pages/admin/login.tsx
new file mode 100644
index 0000000..865b8ab
--- /dev/null
+++ b/pages/admin/login.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from '../../components/admin/pages/login/Index';
+
+export const Login: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+        {
+            { // updateData={(e) => updateData(e)} setToken={setToken}
+                0: <Entrance />,
+               // 1: <EntranceEmail updateData={(e) => updateData(e)}/>,
+               // 2: <EnteringCode updateData={(e) => updateData(e)} data={_data}/>,
+             //   3: <NewPassword email={_data.email} setToken={setToken}/>
+            }[_data.status]
+        }
+        </div>
+    </div>
+    )
+}
+
+export default Login;
diff --git a/pages/admin/main.tsx b/pages/admin/main.tsx
new file mode 100644
index 0000000..3ba495d
--- /dev/null
+++ b/pages/admin/main.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Entrance } from '../../components/admin/pages/login/Index';
+
+export const Main: React.FC = () => {
+    const [_data, setData] = useState({'status': 0, email:'', code:''});
+    const updateData = () => {
+        //setData({ ..._data, 'status':e.status, 'email':e.email, 'code':e.code});
+    }
+
+    return(
+    <div className='wrapper_login'>
+        <div className='login'>
+            Main
+        </div>
+    </div>
+    )
+}
+
+export default Main;
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
new file mode 100644
index 0000000..0ede6b6
--- /dev/null
+++ b/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  error: string,
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({error:'John Doe' })
+}
diff --git a/pages/api/loadingCategories.js b/pages/api/loadingCategories.js
new file mode 100644
index 0000000..08249a7
--- /dev/null
+++ b/pages/api/loadingCategories.js
@@ -0,0 +1,15 @@
+// Загрузка категорий продукта
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT name, types FROM product_categories WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/pages/api/loadingPizza.js b/pages/api/loadingPizza.js
new file mode 100644
index 0000000..85b2cdc
--- /dev/null
+++ b/pages/api/loadingPizza.js
@@ -0,0 +1,14 @@
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT type_pizza.id, type_pizza.title as name, type_pizza.heft_trad, type_pizza.type, type_pizza.heft_thin, type_pizza.price, type_pizza.img_thin, type_pizza.img_trad, type_pizza.size, products.title, products.description FROM type_pizza, products WHERE products.id=type_pizza.id_products and products.type='pizza' and products.status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/pages/api/loadingPizzaCard.js b/pages/api/loadingPizzaCard.js
new file mode 100644
index 0000000..2a90d3b
--- /dev/null
+++ b/pages/api/loadingPizzaCard.js
@@ -0,0 +1,15 @@
+// Загрузка списка пиццы
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT * FROM products WHERE status=1 and type='pizza'";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/pages/api/loadingPizzaInformation/[pid].js b/pages/api/loadingPizzaInformation/[pid].js
new file mode 100644
index 0000000..1d5e5d7
--- /dev/null
+++ b/pages/api/loadingPizzaInformation/[pid].js
@@ -0,0 +1,17 @@
+// Загрузка списка пиццы
+const pool = require("../../../server/db/connect");
+
+const queryString = "SELECT * FROM products WHERE status=1 and id=?";
+
+export default function handler(req, res)  {
+    //const data = req.body;
+    const { pid } = req.query
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString, [pid], function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/pages/api/loadingStock.js b/pages/api/loadingStock.js
new file mode 100644
index 0000000..a8281c3
--- /dev/null
+++ b/pages/api/loadingStock.js
@@ -0,0 +1,15 @@
+// Загрузка списка скидок
+const pool = require("../../server/db/connect");
+
+const queryString = "SELECT * FROM stock WHERE status=1";
+
+export default function handler(req, res)  {
+    pool.getConnection(function(err, conn) {
+        // Do something with the connection
+        conn.query(queryString , function(err, rows, fields) {
+            res.status(200).json(rows);
+         });
+        // Don't forget to release the connection when finished!
+        pool.releaseConnection(conn);
+     })
+}
\ No newline at end of file
diff --git a/pages/api/login/index.ts b/pages/api/login/index.ts
new file mode 100644
index 0000000..28d0339
--- /dev/null
+++ b/pages/api/login/index.ts
@@ -0,0 +1,34 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { RowDataPacket } from "mysql2";
+import type { NextApiRequest, NextApiResponse } from 'next';
+//import { pool } from "../../../server/db/connect";
+import { HashPassword } from '../../../components/admin/function/hashPassword'
+
+const sql = ["SELECT salt FROM user WHERE login=?",
+             "SELECT salt, id FROM user WHERE password_hash=?",
+             "UPDATE user SET token = ? WHERE id = ?"];
+
+export default function handler(
+    req: NextApiRequest,
+    res: NextApiResponse)
+    {
+        const data = req.body.params;
+        //req.method === 'POST' ?
+       /* pool.query( sql[0], [data.login], (err, result:RowDataPacket[0]) => {
+              if (err) {console.log(err)};
+              result.length ?
+                res.status(200).json({error:'Неверный логин'}) :
+                    HashPassword(data.password, result[0].salt, function(hash) {
+                        pool.query(sql[1], [hash], (err, result:RowDataPacket[0]) => {
+                            if (err) {console.log(err)};
+                            result.length ?
+                                HashPassword(data.login+data.password+new Date().toISOString(), result[0].salt , function(token) {
+                                    pool.query(sql[2], [token, result[0].id], function() {
+                                        res.status(200).json({token:token});
+                                    })
+                                }) : res.status(200).json({error:'Неверный пароль'})
+                    })
+                })
+            }
+          ) : res.status(200).json('null'); */
+    };
\ No newline at end of file
diff --git a/pages/api/sessions.js b/pages/api/sessions.js
new file mode 100644
index 0000000..6eb09d7
--- /dev/null
+++ b/pages/api/sessions.js
@@ -0,0 +1,30 @@
+import { withIronSessionApiRoute } from "iron-session/next";
+
+const VALID_EMAIL = "chris@decimal.fm";
+const VALID_PASSWORD = "opensesame";
+
+export default withIronSessionApiRoute(
+    async function loginRoute(req, res) {
+    if (req.method === "POST") {
+      const { email, password } = req.body;
+
+      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
+        req.session.set("user", { email });
+        await req.session.save();
+        return res.status(201).send("");
+      }
+
+      return res.status(403).send("");
+    }
+
+    return res.status(404).send("");
+  },
+  {
+    cookieName: "myapp_cookiename",
+    password: "complex_password_at_least_32_characters_long",
+    // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production",
+    },
+  },
+);
\ No newline at end of file
diff --git a/pages/cart.tsx b/pages/cart.tsx
new file mode 100644
index 0000000..1ba0626
--- /dev/null
+++ b/pages/cart.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import Link from "next/link";
+
+export const CartMod: React.FC = () => {
+    const router = useRouter();
+    const { pizza } = router.query;
+    return(
+        <div id="openModal" className={'modal'}>
+            <div className={classNames('modal_dialog')}>
+                <div className={classNames('modal_content')}>
+                    <div className='modal_body'>
+                        <p>{pizza}</p>
+                    </div>
+                </div>
+            </div>
+      </div>
+    )
+};
+export default CartMod;
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000..3915b8d
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,89 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MainLayout } from '../layouts/Customer';
+import { useRouter } from "next/router";
+
+import {  CardStock,
+          SkeletonStock,
+          MottoBlock,
+          CategoriesButton,
+          CategoriesSkeleton,
+          PizzaBlock,
+          PizzaSkeleton,
+          Description,
+          DeliveryArea } from '../components/customer/pages/index/block';
+
+import {  BoxScroll,
+          Box } from '../components/customer/containers';
+
+
+import { PizzaCard, PizzaCart } from '../components/customer/pages/index/modals'
+
+import { useAppDispatch } from '../redux/store';
+import { fetchStoke, selectStokeData } from '../redux/stoke/';
+import { fetchCategories, selectCategoriesData } from '../redux/categories';
+import { fetchPizza, selectPizzaData } from '../redux/pizza';
+
+interface PropsType {
+  id: number;
+}
+
+const Home: NextPage<PropsType, {}> = () => {
+  const dispatch = useAppDispatch();
+  let router = useRouter();
+  console.log(router.query.cart, 'query');
+  React.useEffect(() => {
+    dispatch( fetchStoke() );
+    dispatch( fetchCategories() );
+    dispatch( fetchPizza() );
+  }, [1]);
+
+  React.useEffect(() => {
+    if (router.query.pizza || router.query.cart) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "visible";
+    }
+  }, [router.query.pizza, router.query.cart]);
+
+  const { items, status } = useSelector(selectStokeData);
+  const { categories_items, categories_status } = useSelector(selectCategoriesData);
+  const { pizza_items, pizza_status } = useSelector(selectPizzaData);
+
+  const stokes = items.map((obj, index) => <CardStock key={index} {...obj} />);
+  const skeletonsStoke = [...new Array(4)].map((_, index) => <SkeletonStock key={index} />);
+
+  const categories = categories_items.map((obj, index) => <CategoriesButton key={index} {...obj}/> );
+  const categoriesSkeleton = [...new Array(6)].map((_, index) => <CategoriesSkeleton key={index} />);
+
+  const pizza = pizza_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
+  const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <MainLayout>
+      <BoxScroll>
+        {status === 'loading' ? skeletonsStoke : stokes}
+      </BoxScroll>
+      <MottoBlock/>
+      <BoxScroll>
+        {categories_status === 'loading' ? categoriesSkeleton : categories}
+      </BoxScroll>
+      <Box>
+        {pizza_status === 'loading' ? pizzaSkeleton : pizza}
+      </Box>
+      <Box>
+        <DeliveryArea/>
+        <Description/>
+      </Box>
+      {router.query.pizza && (
+        <PizzaCard id={router.query.pizza} />
+      )}
+      {router.query.cart && (
+        <PizzaCart id={undefined} />
+      )}
+    </MainLayout>
+  )
+}
+
+export default Home;
diff --git a/pages/private.txt b/pages/private.txt
new file mode 100644
index 0000000..7f7f024
--- /dev/null
+++ b/pages/private.txt
@@ -0,0 +1,34 @@
+import React from "react";
+import { withIronSession } from "next-iron-session";
+
+const PrivatePage = ({ user }) => (
+  <div>
+    <h1>Hello {user.email}</h1>
+    <p>Secret things live here...</p>
+  </div>
+);
+
+export const getServerSideProps = withIronSession(
+  async ({ req, res }) => {
+    const user = req.session.get("user");
+
+    if (!user) {
+      res.statusCode = 404;
+      res.end();
+      return { props: {} };
+    }
+
+    return {
+      props: { user }
+    };
+  },
+  {
+    cookieName: "MYSITECOOKIE",
+    cookieOptions: {
+      secure: process.env.NODE_ENV === "production" ? true : false
+    },
+    password: process.env.APPLICATION_SECRET
+  }
+);
+
+export default PrivatePage;
diff --git a/pages/signin.jsx b/pages/signin.jsx
new file mode 100644
index 0000000..091155b
--- /dev/null
+++ b/pages/signin.jsx
@@ -0,0 +1,45 @@
+import React, { useRef } from "react";
+import { useRouter } from "next/router";
+
+const SignInPage = () => {
+  const router = useRouter();
+  const emailInput = useRef();
+  const passwordInput = useRef();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const email = emailInput.current.value;
+    const password = passwordInput.current.value;
+
+    const response = await fetch("/sessions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password })
+    });
+
+    if (response.ok) {
+      return router.push("/private");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>
+          Email: <input type="text" ref={emailInput} />
+        </label>
+      </div>
+      <div>
+        <label>
+          Password: <input type="password" ref={passwordInput} />
+        </label>
+      </div>
+      <div>
+        <button type="submit">Sign in</button>
+      </div>
+    </form>
+  );
+};
+
+export default SignInPage;
diff --git a/pizza_06_17.zip b/pizza_06_17.zip
new file mode 100644
index 0000000..601adc4
Binary files /dev/null and b/pizza_06_17.zip differ
diff --git a/public/asset/img/01.png b/public/asset/img/01.png
new file mode 100644
index 0000000..7fb51a6
Binary files /dev/null and b/public/asset/img/01.png differ
diff --git a/public/asset/img/02.png b/public/asset/img/02.png
new file mode 100644
index 0000000..849e751
Binary files /dev/null and b/public/asset/img/02.png differ
diff --git a/public/asset/img/03.png b/public/asset/img/03.png
new file mode 100644
index 0000000..383fb4e
Binary files /dev/null and b/public/asset/img/03.png differ
diff --git a/public/asset/img/04.png b/public/asset/img/04.png
new file mode 100644
index 0000000..06a7b92
Binary files /dev/null and b/public/asset/img/04.png differ
diff --git a/public/asset/img/Frame 2159.png b/public/asset/img/Frame 2159.png
new file mode 100644
index 0000000..f364e0d
Binary files /dev/null and b/public/asset/img/Frame 2159.png differ
diff --git a/public/asset/img/Screenshot_9.png b/public/asset/img/Screenshot_9.png
new file mode 100644
index 0000000..053ae29
Binary files /dev/null and b/public/asset/img/Screenshot_9.png differ
diff --git a/public/asset/img/bacon.png b/public/asset/img/bacon.png
new file mode 100644
index 0000000..18b4a9b
Binary files /dev/null and b/public/asset/img/bacon.png differ
diff --git a/public/asset/img/cheese.png b/public/asset/img/cheese.png
new file mode 100644
index 0000000..083c3bb
Binary files /dev/null and b/public/asset/img/cheese.png differ
diff --git a/public/asset/img/coca.png b/public/asset/img/coca.png
new file mode 100644
index 0000000..e282479
Binary files /dev/null and b/public/asset/img/coca.png differ
diff --git a/public/asset/img/fire.svg b/public/asset/img/fire.svg
new file mode 100644
index 0000000..33b9ce6
--- /dev/null
+++ b/public/asset/img/fire.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="47" viewBox="0 0 31 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1115 47C10.1115 47 0 42.1055 0 32.232C0 22.3585 7.09001 16.5437 9.03515 14.8135C11.4374 12.6704 16.0149 8.75477 15.1947 0C15.1947 0 21.7725 5.3888 22.8488 10.9077C23.9251 16.4266 21.7758 25.9294 21.7758 25.9294C21.7758 25.9294 24.8653 25.3635 25.7114 15.8022C25.7114 15.8022 39.7164 36.6159 22.1453 47C22.1453 47 23.8311 41.3966 22.2783 38.0664C20.3104 33.8386 16.7411 32.7686 15.6551 29.1327C15.6583 29.1327 4.47381 37.4387 10.1115 47Z" fill="#252A48"/>
+</svg>
diff --git a/public/asset/img/jalapeno.png b/public/asset/img/jalapeno.png
new file mode 100644
index 0000000..33d63db
Binary files /dev/null and b/public/asset/img/jalapeno.png differ
diff --git a/public/asset/img/moped.svg b/public/asset/img/moped.svg
new file mode 100644
index 0000000..0ece243
--- /dev/null
+++ b/public/asset/img/moped.svg
@@ -0,0 +1,3 @@
+<svg width="52" height="33" viewBox="0 0 52 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.10865 12.1916V4.26375C2.10865 3.94754 2.35255 3.69909 2.66297 3.69909H9.89135C10.2018 3.69909 10.4457 3.94754 10.4457 4.26375V11.627C10.4457 11.9432 10.2018 12.1916 9.89135 12.1916H2.21951H2.10865ZM11.5876 25.2692H9.92461C9.72506 25.2692 9.56985 25.1111 9.56985 24.9078V24.027C9.56985 20.1308 13.2727 16.9687 17.8404 16.9687H19.9357C22.9512 16.9687 25.4013 19.0466 25.4013 21.6102V24.3432V24.9078V25.2692H21.3991H11.5876ZM21.3991 25.2692H11.5876H21.3991ZM18.1286 26.3985C17.8958 27.0874 17.2528 27.5956 16.4989 27.5956C15.745 27.5956 15.0909 27.0987 14.8581 26.3985H18.1286ZM21.0333 27.8215C20.1574 30.3738 18.0621 30.8707 16.4989 30.8707C13.9601 30.8707 11.8647 28.9169 11.5876 26.3985H13.7162C13.9712 27.7199 15.1242 28.725 16.4989 28.725C17.8736 28.725 19.0266 27.7199 19.2816 26.3985H21.4102C21.3437 26.8954 21.2217 27.3698 21.0333 27.8215ZM48.5388 25.7097C48.5388 28.4878 46.3215 30.7352 43.5942 30.7352C41.2661 30.7352 39.2373 29.0412 38.7605 26.7373C39.3149 26.2291 40.0022 25.6419 40.8337 25.0546C40.7894 25.2579 40.7672 25.4725 40.7672 25.6984C40.7672 27.2907 42.0421 28.5894 43.6053 28.5894C45.1685 28.5894 46.4435 27.2907 46.4435 25.6984C46.4435 24.4448 45.6563 23.372 44.5588 22.9767C45.357 22.6492 46.2106 22.3668 47.1197 22.1636C48.0177 23.1122 48.5388 24.3883 48.5388 25.7097ZM42.3526 24.49L42.8514 25.4725C42.9956 25.7548 43.3282 25.8565 43.5942 25.7097C43.8714 25.5628 43.9712 25.224 43.8271 24.953L43.3282 23.9705C43.4169 23.9592 43.4945 23.9479 43.5831 23.9479C44.5588 23.9479 45.357 24.7836 45.3126 25.7887C45.2683 26.6809 44.5477 27.4262 43.6718 27.4601C42.6851 27.5053 41.8647 26.7035 41.8647 25.6984C41.8647 25.2353 42.0532 24.8062 42.3526 24.49ZM41.6319 2.66011C41.9978 2.66011 42.2971 2.96503 42.2971 3.33771V3.37158C42.2971 3.74426 41.9978 4.04918 41.6319 4.04918H41.5211V2.6714H41.6319V2.66011ZM36.4878 4.44444V3.349C36.4878 2.6714 37.031 2.12933 37.6851 2.12933H39.9468C40.2018 2.12933 40.4124 2.3439 40.4124 2.60364V4.09435C40.4124 4.3541 40.2018 4.56867 39.9468 4.56867H37.6741H36.6098C36.5432 4.56867 36.4878 4.5122 36.4878 4.44444ZM36.7428 8.45355L37.6408 5.698H38.9601L43.4501 16.9122C43.3614 16.9122 43.2727 16.9009 43.184 16.9009C41.2217 16.9009 39.3925 17.5559 37.8958 18.674L36.5876 10.7574C36.4435 9.98944 36.51 9.19891 36.7428 8.45355ZM43.173 18.0302C45.2794 18.0302 47.2528 18.8659 48.7384 20.3792C48.8381 20.4809 48.9712 20.5938 49.1153 20.7293C45.3348 21.0004 42.2195 22.6718 40.2129 24.0947C38.5055 25.3144 37.3193 26.5115 36.7761 27.11C36.6652 27.223 36.5211 27.2907 36.3659 27.2907H28.8381C27.7295 27.2907 26.8093 26.5115 26.5543 25.4612H30.7339H35.3126L35.3792 24.9756C35.9002 21.023 39.2483 18.0302 43.173 18.0302ZM22.2195 27.8215C22.3747 27.3698 22.4745 26.8954 22.5188 26.4098H25.7228C25.867 26.7148 25.8115 26.7486 26.2661 27.2455C26.7206 27.7424 27.2195 28.0135 27.2195 28.0135C27.7073 28.2845 28.2727 28.4426 28.8603 28.4426H36.8869C37.0532 28.4426 37.2084 28.3636 37.3193 28.2393C37.3304 28.2281 37.5188 28.0022 37.8625 27.6408C38.2949 28.9847 39.1818 30.1253 40.3237 30.8707H31.5322C31.2217 30.8707 30.9778 31.1191 30.9778 31.4353C30.9778 31.7515 31.2217 32 31.5322 32H50.4457C50.7561 32 51 31.7515 51 31.4353C51 31.1191 50.7561 30.8707 50.4457 30.8707H46.898C48.5499 29.7752 49.6475 27.8667 49.6475 25.7097C49.6475 24.3432 49.1929 23.0219 48.3836 21.949C48.9601 21.8699 49.5588 21.8361 50.1685 21.8361C50.6341 21.8361 50.7894 21.5086 50.8226 21.4182C51.0111 20.91 50.5676 20.526 49.9024 19.9388C49.7583 19.8033 49.6142 19.6791 49.5255 19.6C48.1951 18.2448 46.51 17.3639 44.6918 17.0477L40.1463 5.70929H41.0443C41.3104 5.70929 41.5211 5.49472 41.5211 5.22368V5.17851H41.6319C42.6075 5.17851 43.4058 4.37668 43.4058 3.37158V3.33771C43.4058 2.3439 42.6186 1.53078 41.6319 1.53078H41.5211V1.48561C41.5211 1.21457 41.3104 1 41.0443 1H37.6851C36.4102 1 35.3792 2.05027 35.3792 3.349V4.44444C35.3792 4.48962 35.3792 4.5235 35.3902 4.56867H34.714L32.3526 2.16321H30.1353C29.8248 2.16321 29.5809 2.41166 29.5809 2.72787C29.5809 3.04408 29.8248 3.29253 30.1353 3.29253H31.8869L34.0931 5.53989C34.1929 5.64153 34.3259 5.698 34.459 5.698H36.4656L35.6009 8.3745C35.357 9.10856 35.3016 9.89909 35.4346 10.667L36.898 19.5209C36.0776 20.3341 35.4124 21.3053 34.9468 22.3894L34.5477 23.5188C34.4701 23.7898 34.4035 24.0608 34.3481 24.3432H29.847C29.6475 24.0721 29.459 23.8011 29.2816 23.5188L28.6608 22.3894C28.3614 21.7683 28.1175 21.1133 27.9401 20.447C27.1197 17.4317 27.7517 14.7665 28.2838 13.2758C28.8603 13.129 29.2927 12.5982 29.2927 11.9658C29.2927 10.1137 27.8182 8.61166 26 8.61166H14.6474C13.439 8.61166 12.3858 9.53771 12.286 10.7687C12.2417 11.2882 12.3747 11.7851 12.6186 12.1916H12.1086C11.7982 12.1916 11.5543 11.9432 11.5543 11.627V3.13443C11.5543 2.81822 11.3104 2.56976 11 2.56976H1.55432C1.2439 2.56976 1 2.81822 1 3.13443L1 12.7563C1 13.0725 1.2439 13.3209 1.55432 13.3209H2.21951H5.1796C5.30155 13.3209 5.41242 13.3661 5.5122 13.4339L11.2217 17.8044C11.1996 17.9625 11.1885 18.1206 11.1774 18.2787C9.50333 19.7581 8.47228 21.7909 8.47228 24.027V26.0372C8.47228 26.2404 8.62749 26.3985 8.82705 26.3985H10.49C10.6563 28.2393 11.6208 29.8543 13.0288 30.8707H5.82262C5.5122 30.8707 5.26829 31.1191 5.26829 31.4353C5.26829 31.7515 5.5122 32 5.82262 32H25.3348C25.6452 32 25.8891 31.7515 25.8891 31.4353C25.8891 31.1191 25.6452 30.8707 25.3348 30.8707H19.98C20.6785 30.3625 21.8426 29.3122 22.2195 27.8215ZM28.4834 24.3432H26.51V21.6102C26.51 18.4255 23.561 15.8393 19.9357 15.8393H17.8404C15.8115 15.8393 13.9379 16.404 12.3969 17.3639C12.7184 15.5005 13.5388 14.055 14.0266 13.3097H27.0865C26.5432 14.9923 26.0443 17.7027 26.8647 20.7406C27.2195 22.0281 27.7517 23.2364 28.4834 24.3432ZM14.5809 9.72969H25.9889C27.1973 9.72969 28.1729 10.7235 28.1729 11.9545C28.1729 12.0787 28.0732 12.1803 27.9512 12.1803H14.5809C13.9157 12.1803 13.3725 11.627 13.3725 10.9494C13.3725 10.2718 13.9157 9.72969 14.5809 9.72969ZM12.7184 13.3209C12.2639 14.1002 11.7428 15.2182 11.4324 16.5621L8.52772 14.3373C8.10643 14.0098 8.32816 13.3209 8.86031 13.3209H11.5543H12.7184Z" fill="#252A48" stroke="#252A48" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>
diff --git a/public/asset/img/mushroom.png b/public/asset/img/mushroom.png
new file mode 100644
index 0000000..dd93869
Binary files /dev/null and b/public/asset/img/mushroom.png differ
diff --git a/public/asset/img/onion.png b/public/asset/img/onion.png
new file mode 100644
index 0000000..8313919
Binary files /dev/null and b/public/asset/img/onion.png differ
diff --git a/public/asset/img/phone.svg b/public/asset/img/phone.svg
new file mode 100644
index 0000000..8d86a1f
--- /dev/null
+++ b/public/asset/img/phone.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="414.937px" height="414.937px" viewBox="0 0 414.937 414.937" style="enable-background:new 0 0 414.937 414.937;"
+	 xml:space="preserve">
+<g>
+	<path d="M159.138,256.452c37.217,36.944,80.295,72.236,97.207,55.195c24.215-24.392,39.12-45.614,92.854-2.761
+		c53.734,42.874,12.696,71.727-10.757,95.363c-27.064,27.269-128.432,1.911-228.909-97.804C9.062,206.71-17.07,105.54,10.014,78.258
+		c23.46-23.637,52.006-64.879,95.254-11.458c43.269,53.394,22.161,68.462-2.054,92.861
+		C86.31,176.695,121.915,219.501,159.138,256.452z M213.104,80.203c0,0-11.227-1.754-19.088,6.113
+		c-8.092,8.092-8.445,22.032,0.082,30.552c5.039,5.039,12.145,6.113,12.145,6.113c13.852,2.598,34.728,6.997,56.944,29.206
+		c22.209,22.208,26.608,43.084,29.206,56.943c0,0,1.074,7.106,6.113,12.145c8.521,8.521,22.46,8.174,30.552,0.082
+		c7.861-7.86,6.113-19.087,6.113-19.087c-4.399-28.057-17.999-57.365-41.351-80.716C270.462,98.203,241.153,84.609,213.104,80.203z
+		 M318.415,96.958c40.719,40.719,58.079,86.932,52.428,124.379c0,0-1.972,11.859,5.773,19.604
+		c8.718,8.718,22.535,8.215,30.695,0.062c5.243-5.243,6.385-13.777,6.385-13.777c4.672-32.361-1.203-97.464-64.647-160.901
+		C285.605,2.887,220.509-2.988,188.147,1.677c0,0-8.527,1.136-13.777,6.385c-8.16,8.16-8.656,21.978,0.061,30.695
+		c7.746,7.746,19.604,5.773,19.604,5.773C231.484,38.879,277.696,56.24,318.415,96.958z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/public/asset/img/pickles.png b/public/asset/img/pickles.png
new file mode 100644
index 0000000..124f91a
Binary files /dev/null and b/public/asset/img/pickles.png differ
diff --git a/public/asset/img/pineapple.png b/public/asset/img/pineapple.png
new file mode 100644
index 0000000..bd0dc24
Binary files /dev/null and b/public/asset/img/pineapple.png differ
diff --git a/public/asset/img/pizza.png b/public/asset/img/pizza.png
new file mode 100644
index 0000000..caca6b5
Binary files /dev/null and b/public/asset/img/pizza.png differ
diff --git a/public/asset/img/rt_1.png b/public/asset/img/rt_1.png
new file mode 100644
index 0000000..a6077a5
Binary files /dev/null and b/public/asset/img/rt_1.png differ
diff --git a/public/asset/img/rt_2.png b/public/asset/img/rt_2.png
new file mode 100644
index 0000000..2d775b8
Binary files /dev/null and b/public/asset/img/rt_2.png differ
diff --git a/public/asset/img/rt_3.png b/public/asset/img/rt_3.png
new file mode 100644
index 0000000..3658176
Binary files /dev/null and b/public/asset/img/rt_3.png differ
diff --git a/public/asset/img/smal_pizza.png b/public/asset/img/smal_pizza.png
new file mode 100644
index 0000000..67e9e51
Binary files /dev/null and b/public/asset/img/smal_pizza.png differ
diff --git a/public/asset/img/tomato.png b/public/asset/img/tomato.png
new file mode 100644
index 0000000..5de2ff1
Binary files /dev/null and b/public/asset/img/tomato.png differ
diff --git a/public/asset/img/ton_1.png b/public/asset/img/ton_1.png
new file mode 100644
index 0000000..0e4ea8d
Binary files /dev/null and b/public/asset/img/ton_1.png differ
diff --git a/public/asset/img/ton_2.png b/public/asset/img/ton_2.png
new file mode 100644
index 0000000..3e5a644
Binary files /dev/null and b/public/asset/img/ton_2.png differ
diff --git a/public/asset/img/ton_3.png b/public/asset/img/ton_3.png
new file mode 100644
index 0000000..9ada56b
Binary files /dev/null and b/public/asset/img/ton_3.png differ
diff --git a/public/asset/img/video.png b/public/asset/img/video.png
new file mode 100644
index 0000000..b33b1cf
Binary files /dev/null and b/public/asset/img/video.png differ
diff --git a/public/assets/Rubik/OFL.txt b/public/assets/Rubik/OFL.txt
new file mode 100644
index 0000000..cdb3773
--- /dev/null
+++ b/public/assets/Rubik/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/assets/Rubik/README.txt b/public/assets/Rubik/README.txt
new file mode 100644
index 0000000..8f3d806
--- /dev/null
+++ b/public/assets/Rubik/README.txt
@@ -0,0 +1,77 @@
+Rubik Variable Font
+===================
+
+This download contains Rubik as both variable fonts and static fonts.
+
+Rubik is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Rubik-VariableFont_wght.ttf
+  Rubik-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Rubik:
+  static/Rubik-Light.ttf
+  static/Rubik-Regular.ttf
+  static/Rubik-Medium.ttf
+  static/Rubik-SemiBold.ttf
+  static/Rubik-Bold.ttf
+  static/Rubik-ExtraBold.ttf
+  static/Rubik-Black.ttf
+  static/Rubik-LightItalic.ttf
+  static/Rubik-Italic.ttf
+  static/Rubik-MediumItalic.ttf
+  static/Rubik-SemiBoldItalic.ttf
+  static/Rubik-BoldItalic.ttf
+  static/Rubik-ExtraBoldItalic.ttf
+  static/Rubik-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them freely in your products & projects - print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf b/public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..8f9c9cc
Binary files /dev/null and b/public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf differ
diff --git a/public/assets/Rubik/Rubik-VariableFont_wght.ttf b/public/assets/Rubik/Rubik-VariableFont_wght.ttf
new file mode 100644
index 0000000..c253818
Binary files /dev/null and b/public/assets/Rubik/Rubik-VariableFont_wght.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-Black.ttf b/public/assets/Rubik/static/Rubik-Black.ttf
new file mode 100644
index 0000000..5c52539
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-Black.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-BlackItalic.ttf b/public/assets/Rubik/static/Rubik-BlackItalic.ttf
new file mode 100644
index 0000000..5bc910a
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-BlackItalic.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-Bold.ttf b/public/assets/Rubik/static/Rubik-Bold.ttf
new file mode 100644
index 0000000..dd50bbe
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-Bold.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-BoldItalic.ttf b/public/assets/Rubik/static/Rubik-BoldItalic.ttf
new file mode 100644
index 0000000..17553c1
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-BoldItalic.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-ExtraBold.ttf b/public/assets/Rubik/static/Rubik-ExtraBold.ttf
new file mode 100644
index 0000000..b62600d
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-ExtraBold.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-ExtraBoldItalic.ttf b/public/assets/Rubik/static/Rubik-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..c995018
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-ExtraBoldItalic.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-Italic.ttf b/public/assets/Rubik/static/Rubik-Italic.ttf
new file mode 100644
index 0000000..f21a737
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-Italic.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-Light.ttf b/public/assets/Rubik/static/Rubik-Light.ttf
new file mode 100644
index 0000000..7b6d96c
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-Light.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-LightItalic.ttf b/public/assets/Rubik/static/Rubik-LightItalic.ttf
new file mode 100644
index 0000000..be47078
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-LightItalic.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-Medium.ttf b/public/assets/Rubik/static/Rubik-Medium.ttf
new file mode 100644
index 0000000..a4008b7
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-Medium.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-MediumItalic.ttf b/public/assets/Rubik/static/Rubik-MediumItalic.ttf
new file mode 100644
index 0000000..3d112df
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-MediumItalic.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-Regular.ttf b/public/assets/Rubik/static/Rubik-Regular.ttf
new file mode 100644
index 0000000..dc90ef0
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-Regular.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-SemiBold.ttf b/public/assets/Rubik/static/Rubik-SemiBold.ttf
new file mode 100644
index 0000000..9453d96
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-SemiBold.ttf differ
diff --git a/public/assets/Rubik/static/Rubik-SemiBoldItalic.ttf b/public/assets/Rubik/static/Rubik-SemiBoldItalic.ttf
new file mode 100644
index 0000000..76d9667
Binary files /dev/null and b/public/assets/Rubik/static/Rubik-SemiBoldItalic.ttf differ
diff --git a/public/assets/img/01.png b/public/assets/img/01.png
new file mode 100644
index 0000000..7fb51a6
Binary files /dev/null and b/public/assets/img/01.png differ
diff --git a/public/assets/img/02.png b/public/assets/img/02.png
new file mode 100644
index 0000000..849e751
Binary files /dev/null and b/public/assets/img/02.png differ
diff --git a/public/assets/img/03.png b/public/assets/img/03.png
new file mode 100644
index 0000000..383fb4e
Binary files /dev/null and b/public/assets/img/03.png differ
diff --git a/public/assets/img/04.png b/public/assets/img/04.png
new file mode 100644
index 0000000..06a7b92
Binary files /dev/null and b/public/assets/img/04.png differ
diff --git a/public/assets/img/1.jpg b/public/assets/img/1.jpg
new file mode 100644
index 0000000..3fc46a6
Binary files /dev/null and b/public/assets/img/1.jpg differ
diff --git a/public/assets/img/10.jpg b/public/assets/img/10.jpg
new file mode 100644
index 0000000..5b0b62e
Binary files /dev/null and b/public/assets/img/10.jpg differ
diff --git a/public/assets/img/2.jpg b/public/assets/img/2.jpg
new file mode 100644
index 0000000..a927135
Binary files /dev/null and b/public/assets/img/2.jpg differ
diff --git a/public/assets/img/3.jpg b/public/assets/img/3.jpg
new file mode 100644
index 0000000..c197010
Binary files /dev/null and b/public/assets/img/3.jpg differ
diff --git a/public/assets/img/4.jpg b/public/assets/img/4.jpg
new file mode 100644
index 0000000..2d12c01
Binary files /dev/null and b/public/assets/img/4.jpg differ
diff --git a/public/assets/img/5.jpg b/public/assets/img/5.jpg
new file mode 100644
index 0000000..8e446fa
Binary files /dev/null and b/public/assets/img/5.jpg differ
diff --git a/public/assets/img/6.jpg b/public/assets/img/6.jpg
new file mode 100644
index 0000000..266b30e
Binary files /dev/null and b/public/assets/img/6.jpg differ
diff --git a/public/assets/img/7.jpg b/public/assets/img/7.jpg
new file mode 100644
index 0000000..b09ebf8
Binary files /dev/null and b/public/assets/img/7.jpg differ
diff --git a/public/assets/img/8.jpg b/public/assets/img/8.jpg
new file mode 100644
index 0000000..85888f7
Binary files /dev/null and b/public/assets/img/8.jpg differ
diff --git a/public/assets/img/9.jpg b/public/assets/img/9.jpg
new file mode 100644
index 0000000..d5d89ea
Binary files /dev/null and b/public/assets/img/9.jpg differ
diff --git a/public/assets/img/Frame 2159.png b/public/assets/img/Frame 2159.png
new file mode 100644
index 0000000..f364e0d
Binary files /dev/null and b/public/assets/img/Frame 2159.png differ
diff --git a/public/assets/img/Screenshot_9.png b/public/assets/img/Screenshot_9.png
new file mode 100644
index 0000000..053ae29
Binary files /dev/null and b/public/assets/img/Screenshot_9.png differ
diff --git a/public/assets/img/bacon.png b/public/assets/img/bacon.png
new file mode 100644
index 0000000..18b4a9b
Binary files /dev/null and b/public/assets/img/bacon.png differ
diff --git a/public/assets/img/cheese.png b/public/assets/img/cheese.png
new file mode 100644
index 0000000..083c3bb
Binary files /dev/null and b/public/assets/img/cheese.png differ
diff --git a/public/assets/img/coca.png b/public/assets/img/coca.png
new file mode 100644
index 0000000..e282479
Binary files /dev/null and b/public/assets/img/coca.png differ
diff --git a/public/assets/img/fire.svg b/public/assets/img/fire.svg
new file mode 100644
index 0000000..33b9ce6
--- /dev/null
+++ b/public/assets/img/fire.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="47" viewBox="0 0 31 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1115 47C10.1115 47 0 42.1055 0 32.232C0 22.3585 7.09001 16.5437 9.03515 14.8135C11.4374 12.6704 16.0149 8.75477 15.1947 0C15.1947 0 21.7725 5.3888 22.8488 10.9077C23.9251 16.4266 21.7758 25.9294 21.7758 25.9294C21.7758 25.9294 24.8653 25.3635 25.7114 15.8022C25.7114 15.8022 39.7164 36.6159 22.1453 47C22.1453 47 23.8311 41.3966 22.2783 38.0664C20.3104 33.8386 16.7411 32.7686 15.6551 29.1327C15.6583 29.1327 4.47381 37.4387 10.1115 47Z" fill="#252A48"/>
+</svg>
diff --git a/public/assets/img/jalapeno.png b/public/assets/img/jalapeno.png
new file mode 100644
index 0000000..33d63db
Binary files /dev/null and b/public/assets/img/jalapeno.png differ
diff --git a/public/assets/img/minus.png b/public/assets/img/minus.png
new file mode 100644
index 0000000..989ab85
Binary files /dev/null and b/public/assets/img/minus.png differ
diff --git a/public/assets/img/moped.svg b/public/assets/img/moped.svg
new file mode 100644
index 0000000..0ece243
--- /dev/null
+++ b/public/assets/img/moped.svg
@@ -0,0 +1,3 @@
+<svg width="52" height="33" viewBox="0 0 52 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.10865 12.1916V4.26375C2.10865 3.94754 2.35255 3.69909 2.66297 3.69909H9.89135C10.2018 3.69909 10.4457 3.94754 10.4457 4.26375V11.627C10.4457 11.9432 10.2018 12.1916 9.89135 12.1916H2.21951H2.10865ZM11.5876 25.2692H9.92461C9.72506 25.2692 9.56985 25.1111 9.56985 24.9078V24.027C9.56985 20.1308 13.2727 16.9687 17.8404 16.9687H19.9357C22.9512 16.9687 25.4013 19.0466 25.4013 21.6102V24.3432V24.9078V25.2692H21.3991H11.5876ZM21.3991 25.2692H11.5876H21.3991ZM18.1286 26.3985C17.8958 27.0874 17.2528 27.5956 16.4989 27.5956C15.745 27.5956 15.0909 27.0987 14.8581 26.3985H18.1286ZM21.0333 27.8215C20.1574 30.3738 18.0621 30.8707 16.4989 30.8707C13.9601 30.8707 11.8647 28.9169 11.5876 26.3985H13.7162C13.9712 27.7199 15.1242 28.725 16.4989 28.725C17.8736 28.725 19.0266 27.7199 19.2816 26.3985H21.4102C21.3437 26.8954 21.2217 27.3698 21.0333 27.8215ZM48.5388 25.7097C48.5388 28.4878 46.3215 30.7352 43.5942 30.7352C41.2661 30.7352 39.2373 29.0412 38.7605 26.7373C39.3149 26.2291 40.0022 25.6419 40.8337 25.0546C40.7894 25.2579 40.7672 25.4725 40.7672 25.6984C40.7672 27.2907 42.0421 28.5894 43.6053 28.5894C45.1685 28.5894 46.4435 27.2907 46.4435 25.6984C46.4435 24.4448 45.6563 23.372 44.5588 22.9767C45.357 22.6492 46.2106 22.3668 47.1197 22.1636C48.0177 23.1122 48.5388 24.3883 48.5388 25.7097ZM42.3526 24.49L42.8514 25.4725C42.9956 25.7548 43.3282 25.8565 43.5942 25.7097C43.8714 25.5628 43.9712 25.224 43.8271 24.953L43.3282 23.9705C43.4169 23.9592 43.4945 23.9479 43.5831 23.9479C44.5588 23.9479 45.357 24.7836 45.3126 25.7887C45.2683 26.6809 44.5477 27.4262 43.6718 27.4601C42.6851 27.5053 41.8647 26.7035 41.8647 25.6984C41.8647 25.2353 42.0532 24.8062 42.3526 24.49ZM41.6319 2.66011C41.9978 2.66011 42.2971 2.96503 42.2971 3.33771V3.37158C42.2971 3.74426 41.9978 4.04918 41.6319 4.04918H41.5211V2.6714H41.6319V2.66011ZM36.4878 4.44444V3.349C36.4878 2.6714 37.031 2.12933 37.6851 2.12933H39.9468C40.2018 2.12933 40.4124 2.3439 40.4124 2.60364V4.09435C40.4124 4.3541 40.2018 4.56867 39.9468 4.56867H37.6741H36.6098C36.5432 4.56867 36.4878 4.5122 36.4878 4.44444ZM36.7428 8.45355L37.6408 5.698H38.9601L43.4501 16.9122C43.3614 16.9122 43.2727 16.9009 43.184 16.9009C41.2217 16.9009 39.3925 17.5559 37.8958 18.674L36.5876 10.7574C36.4435 9.98944 36.51 9.19891 36.7428 8.45355ZM43.173 18.0302C45.2794 18.0302 47.2528 18.8659 48.7384 20.3792C48.8381 20.4809 48.9712 20.5938 49.1153 20.7293C45.3348 21.0004 42.2195 22.6718 40.2129 24.0947C38.5055 25.3144 37.3193 26.5115 36.7761 27.11C36.6652 27.223 36.5211 27.2907 36.3659 27.2907H28.8381C27.7295 27.2907 26.8093 26.5115 26.5543 25.4612H30.7339H35.3126L35.3792 24.9756C35.9002 21.023 39.2483 18.0302 43.173 18.0302ZM22.2195 27.8215C22.3747 27.3698 22.4745 26.8954 22.5188 26.4098H25.7228C25.867 26.7148 25.8115 26.7486 26.2661 27.2455C26.7206 27.7424 27.2195 28.0135 27.2195 28.0135C27.7073 28.2845 28.2727 28.4426 28.8603 28.4426H36.8869C37.0532 28.4426 37.2084 28.3636 37.3193 28.2393C37.3304 28.2281 37.5188 28.0022 37.8625 27.6408C38.2949 28.9847 39.1818 30.1253 40.3237 30.8707H31.5322C31.2217 30.8707 30.9778 31.1191 30.9778 31.4353C30.9778 31.7515 31.2217 32 31.5322 32H50.4457C50.7561 32 51 31.7515 51 31.4353C51 31.1191 50.7561 30.8707 50.4457 30.8707H46.898C48.5499 29.7752 49.6475 27.8667 49.6475 25.7097C49.6475 24.3432 49.1929 23.0219 48.3836 21.949C48.9601 21.8699 49.5588 21.8361 50.1685 21.8361C50.6341 21.8361 50.7894 21.5086 50.8226 21.4182C51.0111 20.91 50.5676 20.526 49.9024 19.9388C49.7583 19.8033 49.6142 19.6791 49.5255 19.6C48.1951 18.2448 46.51 17.3639 44.6918 17.0477L40.1463 5.70929H41.0443C41.3104 5.70929 41.5211 5.49472 41.5211 5.22368V5.17851H41.6319C42.6075 5.17851 43.4058 4.37668 43.4058 3.37158V3.33771C43.4058 2.3439 42.6186 1.53078 41.6319 1.53078H41.5211V1.48561C41.5211 1.21457 41.3104 1 41.0443 1H37.6851C36.4102 1 35.3792 2.05027 35.3792 3.349V4.44444C35.3792 4.48962 35.3792 4.5235 35.3902 4.56867H34.714L32.3526 2.16321H30.1353C29.8248 2.16321 29.5809 2.41166 29.5809 2.72787C29.5809 3.04408 29.8248 3.29253 30.1353 3.29253H31.8869L34.0931 5.53989C34.1929 5.64153 34.3259 5.698 34.459 5.698H36.4656L35.6009 8.3745C35.357 9.10856 35.3016 9.89909 35.4346 10.667L36.898 19.5209C36.0776 20.3341 35.4124 21.3053 34.9468 22.3894L34.5477 23.5188C34.4701 23.7898 34.4035 24.0608 34.3481 24.3432H29.847C29.6475 24.0721 29.459 23.8011 29.2816 23.5188L28.6608 22.3894C28.3614 21.7683 28.1175 21.1133 27.9401 20.447C27.1197 17.4317 27.7517 14.7665 28.2838 13.2758C28.8603 13.129 29.2927 12.5982 29.2927 11.9658C29.2927 10.1137 27.8182 8.61166 26 8.61166H14.6474C13.439 8.61166 12.3858 9.53771 12.286 10.7687C12.2417 11.2882 12.3747 11.7851 12.6186 12.1916H12.1086C11.7982 12.1916 11.5543 11.9432 11.5543 11.627V3.13443C11.5543 2.81822 11.3104 2.56976 11 2.56976H1.55432C1.2439 2.56976 1 2.81822 1 3.13443L1 12.7563C1 13.0725 1.2439 13.3209 1.55432 13.3209H2.21951H5.1796C5.30155 13.3209 5.41242 13.3661 5.5122 13.4339L11.2217 17.8044C11.1996 17.9625 11.1885 18.1206 11.1774 18.2787C9.50333 19.7581 8.47228 21.7909 8.47228 24.027V26.0372C8.47228 26.2404 8.62749 26.3985 8.82705 26.3985H10.49C10.6563 28.2393 11.6208 29.8543 13.0288 30.8707H5.82262C5.5122 30.8707 5.26829 31.1191 5.26829 31.4353C5.26829 31.7515 5.5122 32 5.82262 32H25.3348C25.6452 32 25.8891 31.7515 25.8891 31.4353C25.8891 31.1191 25.6452 30.8707 25.3348 30.8707H19.98C20.6785 30.3625 21.8426 29.3122 22.2195 27.8215ZM28.4834 24.3432H26.51V21.6102C26.51 18.4255 23.561 15.8393 19.9357 15.8393H17.8404C15.8115 15.8393 13.9379 16.404 12.3969 17.3639C12.7184 15.5005 13.5388 14.055 14.0266 13.3097H27.0865C26.5432 14.9923 26.0443 17.7027 26.8647 20.7406C27.2195 22.0281 27.7517 23.2364 28.4834 24.3432ZM14.5809 9.72969H25.9889C27.1973 9.72969 28.1729 10.7235 28.1729 11.9545C28.1729 12.0787 28.0732 12.1803 27.9512 12.1803H14.5809C13.9157 12.1803 13.3725 11.627 13.3725 10.9494C13.3725 10.2718 13.9157 9.72969 14.5809 9.72969ZM12.7184 13.3209C12.2639 14.1002 11.7428 15.2182 11.4324 16.5621L8.52772 14.3373C8.10643 14.0098 8.32816 13.3209 8.86031 13.3209H11.5543H12.7184Z" fill="#252A48" stroke="#252A48" stroke-width="0.5" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>
diff --git a/public/assets/img/mushroom.png b/public/assets/img/mushroom.png
new file mode 100644
index 0000000..dd93869
Binary files /dev/null and b/public/assets/img/mushroom.png differ
diff --git a/public/assets/img/onion.png b/public/assets/img/onion.png
new file mode 100644
index 0000000..8313919
Binary files /dev/null and b/public/assets/img/onion.png differ
diff --git a/public/assets/img/phone.svg b/public/assets/img/phone.svg
new file mode 100644
index 0000000..8d86a1f
--- /dev/null
+++ b/public/assets/img/phone.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="414.937px" height="414.937px" viewBox="0 0 414.937 414.937" style="enable-background:new 0 0 414.937 414.937;"
+	 xml:space="preserve">
+<g>
+	<path d="M159.138,256.452c37.217,36.944,80.295,72.236,97.207,55.195c24.215-24.392,39.12-45.614,92.854-2.761
+		c53.734,42.874,12.696,71.727-10.757,95.363c-27.064,27.269-128.432,1.911-228.909-97.804C9.062,206.71-17.07,105.54,10.014,78.258
+		c23.46-23.637,52.006-64.879,95.254-11.458c43.269,53.394,22.161,68.462-2.054,92.861
+		C86.31,176.695,121.915,219.501,159.138,256.452z M213.104,80.203c0,0-11.227-1.754-19.088,6.113
+		c-8.092,8.092-8.445,22.032,0.082,30.552c5.039,5.039,12.145,6.113,12.145,6.113c13.852,2.598,34.728,6.997,56.944,29.206
+		c22.209,22.208,26.608,43.084,29.206,56.943c0,0,1.074,7.106,6.113,12.145c8.521,8.521,22.46,8.174,30.552,0.082
+		c7.861-7.86,6.113-19.087,6.113-19.087c-4.399-28.057-17.999-57.365-41.351-80.716C270.462,98.203,241.153,84.609,213.104,80.203z
+		 M318.415,96.958c40.719,40.719,58.079,86.932,52.428,124.379c0,0-1.972,11.859,5.773,19.604
+		c8.718,8.718,22.535,8.215,30.695,0.062c5.243-5.243,6.385-13.777,6.385-13.777c4.672-32.361-1.203-97.464-64.647-160.901
+		C285.605,2.887,220.509-2.988,188.147,1.677c0,0-8.527,1.136-13.777,6.385c-8.16,8.16-8.656,21.978,0.061,30.695
+		c7.746,7.746,19.604,5.773,19.604,5.773C231.484,38.879,277.696,56.24,318.415,96.958z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/public/assets/img/pickles.png b/public/assets/img/pickles.png
new file mode 100644
index 0000000..124f91a
Binary files /dev/null and b/public/assets/img/pickles.png differ
diff --git a/public/assets/img/pineapple.png b/public/assets/img/pineapple.png
new file mode 100644
index 0000000..bd0dc24
Binary files /dev/null and b/public/assets/img/pineapple.png differ
diff --git a/public/assets/img/pizza-logo.svg b/public/assets/img/pizza-logo.svg
new file mode 100644
index 0000000..a1a29ae
--- /dev/null
+++ b/public/assets/img/pizza-logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#8a490e;}.cls-2{fill:#a16d3e;}.cls-3{fill:#f6b361;}.cls-4{fill:#f8c281;}.cls-5{fill:#ffff97;}.cls-6{fill:#ffffac;}.cls-7{fill:red;}.cls-8{fill:#d39953;}</style></defs><title/><g data-name="Layer 25" id="Layer_25"><path class="cls-1" d="M32,53A43.539,43.539,0,0,1,5.615,44.16L1.288,51.239a1.983,1.983,0,0,0,.627,2.693,54.441,54.441,0,0,0,60.17,0,1.983,1.983,0,0,0,.627-2.693L58.385,44.16A43.539,43.539,0,0,1,32,53Z"/><path class="cls-2" d="M62.712,51.239,58.385,44.16c-.681.516-1.382,1.006-2.094,1.483l3.421,5.6a1.983,1.983,0,0,1-.627,2.693A53.965,53.965,0,0,1,30.5,62.972c.5.013,1,.028,1.5.028a54.008,54.008,0,0,0,30.085-9.068A1.983,1.983,0,0,0,62.712,51.239Z"/><path class="cls-3" d="M58.385,44.16a43.8,43.8,0,0,1-52.77,0L26.206,10.48,32,1l5.794,9.48Z"/><path class="cls-4" d="M37.794,10.48,32,1,30.5,3.454l4.294,7.026L55.385,44.16A43.523,43.523,0,0,1,30.5,52.969c.5.017,1,.031,1.5.031a43.547,43.547,0,0,0,26.385-8.84Z"/><path class="cls-5" d="M37.65,10.48A6.88,6.88,0,0,1,35,11a6.986,6.986,0,0,1-3-.68A6.986,6.986,0,0,1,29,11a6.88,6.88,0,0,1-2.65-.52L32,1Z"/><path class="cls-6" d="M32,1,30.5,3.517l4.15,6.963a6.757,6.757,0,0,1-1.143.353,6.92,6.92,0,0,0,4.143-.353Z"/><path d="M63.565,50.718l-4.327-7.079L32.867.5,32.859.488h0L32.854.479a.792.792,0,0,0-.111-.132c-.017-.019-.03-.042-.048-.059a1.075,1.075,0,0,0-1.39,0c-.019.018-.033.042-.051.062a.849.849,0,0,0-.108.129l-.005.008h0L31.133.5,4.762,43.639.435,50.718a2.989,2.989,0,0,0,.924,4.046,55.445,55.445,0,0,0,61.282,0A2.989,2.989,0,0,0,63.565,50.718ZM56.7,44.15c-.224.159-.448.316-.674.47q-.366.251-.737.492c-.232.151-.465.3-.7.447s-.495.306-.745.455-.478.284-.719.421-.5.282-.755.42-.489.265-.735.392-.513.261-.771.388-.5.245-.747.362-.521.239-.782.355-.508.226-.764.333-.529.217-.8.322-.512.2-.77.3-.544.2-.817.292-.516.182-.775.268c-.276.09-.554.175-.832.26-.26.079-.52.161-.781.235-.284.081-.569.155-.855.229-.259.068-.518.139-.778.2-.292.071-.587.133-.88.2-.258.057-.515.116-.774.168-.3.061-.609.113-.914.167-.252.045-.5.093-.756.134-.318.05-.638.091-.958.135-.244.033-.486.07-.731.1-.336.04-.674.07-1.012.1-.231.022-.461.049-.693.067-.375.03-.754.048-1.131.068-.2.01-.391.026-.587.034Q32.869,52,32,52t-1.731-.034c-.2-.008-.391-.024-.587-.034-.377-.02-.756-.038-1.131-.068-.232-.018-.462-.045-.693-.067-.338-.032-.676-.062-1.012-.1-.245-.029-.488-.066-.732-.1-.319-.044-.639-.085-.957-.135-.253-.041-.5-.089-.757-.134-.3-.054-.61-.106-.913-.167-.259-.052-.516-.111-.774-.168-.293-.065-.588-.127-.88-.2-.26-.063-.519-.134-.778-.2-.286-.074-.571-.148-.855-.229-.261-.074-.521-.156-.781-.235-.278-.085-.556-.17-.832-.26-.259-.086-.517-.178-.775-.268-.273-.1-.546-.191-.817-.292s-.514-.2-.77-.3-.531-.211-.8-.322-.51-.22-.764-.333-.523-.233-.782-.355-.5-.239-.748-.362-.514-.255-.769-.387-.492-.26-.736-.393-.505-.277-.755-.42-.48-.279-.719-.421-.5-.3-.745-.455-.467-.3-.7-.447-.493-.325-.737-.492c-.226-.154-.45-.311-.674-.47-.118-.084-.235-.17-.352-.256L26.661,11.651A8.039,8.039,0,0,0,32,11.412a7.985,7.985,0,0,0,5.339.24L57.05,43.894C56.933,43.98,56.816,44.066,56.7,44.15ZM36.137,9.894a6.07,6.07,0,0,1-3.709-.478,1,1,0,0,0-.856,0,6.073,6.073,0,0,1-3.709.478L32,2.953ZM61.529,53.1a53.442,53.442,0,0,1-59.058,0,.981.981,0,0,1-.329-1.34L5.9,45.614c.105.075.213.145.318.219.222.158.446.312.671.465q.4.275.811.541c.228.148.458.293.688.437q.411.256.824.5.352.208.706.411c.279.159.558.314.84.466q.358.2.72.383.423.219.851.428c.245.121.491.24.738.355.287.135.575.264.865.392.249.11.5.22.749.325.292.123.585.24.879.356.253.1.507.2.762.3.3.11.594.215.893.319.256.09.512.18.771.265.3.1.6.191.909.284.259.079.517.159.778.233.308.088.618.168.929.249.259.068.517.138.777.2.316.076.633.144.951.214.26.056.518.116.779.168.324.065.651.121.976.178.257.046.512.094.769.135.337.054.676.1,1.014.143.251.034.5.073.752.1.356.043.715.074,1.074.108.235.022.469.049.7.068.4.031.8.051,1.2.072.2.01.4.026.6.034Q31.093,54,32,54t1.807-.036c.2-.008.4-.024.595-.034.4-.021.8-.041,1.2-.072.235-.018.469-.046.7-.068.359-.034.718-.065,1.075-.108.252-.029.5-.068.752-.1.338-.045.677-.089,1.014-.143.257-.041.512-.089.769-.135.325-.057.652-.113.976-.178.261-.052.519-.112.779-.168.318-.07.635-.138.951-.214.26-.063.518-.133.777-.2.311-.081.621-.161.929-.249.261-.074.519-.154.778-.233.3-.093.608-.185.909-.284.259-.085.515-.175.771-.265.3-.1.6-.209.893-.319.255-.1.508-.2.761-.3.295-.117.588-.234.88-.357.251-.105.5-.214.749-.324.289-.129.578-.258.865-.393.247-.115.493-.234.738-.355q.427-.21.851-.428.361-.187.72-.383c.282-.152.561-.307.84-.466q.354-.2.706-.411.414-.246.824-.5c.23-.144.46-.289.688-.437q.408-.266.811-.541c.225-.153.449-.307.671-.465.105-.074.213-.144.318-.219l3.756,6.147A.981.981,0,0,1,61.529,53.1Z"/><circle class="cls-7" cx="32" cy="20" r="3"/><path d="M32,24a4,4,0,1,1,4-4A4,4,0,0,1,32,24Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,32,18Z"/><circle class="cls-7" cx="18" cy="41" r="3"/><path d="M18,45a4,4,0,1,1,4-4A4,4,0,0,1,18,45Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,18,39Z"/><circle class="cls-7" cx="46" cy="41" r="3"/><path d="M46,45a4,4,0,1,1,4-4A4,4,0,0,1,46,45Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,46,39Z"/><circle class="cls-7" cx="32" cy="44" r="3"/><path d="M32,48a4,4,0,1,1,4-4A4,4,0,0,1,32,48Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,32,42Z"/><circle class="cls-7" cx="24" cy="30" r="3"/><path d="M24,34a4,4,0,1,1,4-4A4,4,0,0,1,24,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,24,28Z"/><circle class="cls-7" cx="40" cy="30" r="3"/><path d="M40,34a4,4,0,1,1,4-4A4,4,0,0,1,40,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,40,28Z"/><path class="cls-8" d="M27,38H25a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M39,38H37a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M33,30H31a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M25,24H23a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M41,24H39a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/></g></svg>
\ No newline at end of file
diff --git a/public/assets/img/pizza.png b/public/assets/img/pizza.png
new file mode 100644
index 0000000..caca6b5
Binary files /dev/null and b/public/assets/img/pizza.png differ
diff --git a/public/assets/img/plus.png b/public/assets/img/plus.png
new file mode 100644
index 0000000..ac620e0
Binary files /dev/null and b/public/assets/img/plus.png differ
diff --git a/public/assets/img/rt_1.png b/public/assets/img/rt_1.png
new file mode 100644
index 0000000..a6077a5
Binary files /dev/null and b/public/assets/img/rt_1.png differ
diff --git a/public/assets/img/rt_2.png b/public/assets/img/rt_2.png
new file mode 100644
index 0000000..2d775b8
Binary files /dev/null and b/public/assets/img/rt_2.png differ
diff --git a/public/assets/img/rt_3.png b/public/assets/img/rt_3.png
new file mode 100644
index 0000000..3658176
Binary files /dev/null and b/public/assets/img/rt_3.png differ
diff --git a/public/assets/img/smal_pizza.png b/public/assets/img/smal_pizza.png
new file mode 100644
index 0000000..67e9e51
Binary files /dev/null and b/public/assets/img/smal_pizza.png differ
diff --git a/public/assets/img/tomato.png b/public/assets/img/tomato.png
new file mode 100644
index 0000000..5de2ff1
Binary files /dev/null and b/public/assets/img/tomato.png differ
diff --git a/public/assets/img/ton_1.png b/public/assets/img/ton_1.png
new file mode 100644
index 0000000..0e4ea8d
Binary files /dev/null and b/public/assets/img/ton_1.png differ
diff --git a/public/assets/img/ton_2.png b/public/assets/img/ton_2.png
new file mode 100644
index 0000000..3e5a644
Binary files /dev/null and b/public/assets/img/ton_2.png differ
diff --git a/public/assets/img/ton_3.png b/public/assets/img/ton_3.png
new file mode 100644
index 0000000..9ada56b
Binary files /dev/null and b/public/assets/img/ton_3.png differ
diff --git a/public/assets/img/video.png b/public/assets/img/video.png
new file mode 100644
index 0000000..b33b1cf
Binary files /dev/null and b/public/assets/img/video.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/vercel.svg b/public/vercel.svg
new file mode 100644
index 0000000..fbf0e25
--- /dev/null
+++ b/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file
diff --git a/redux/cart/selectors.ts b/redux/cart/selectors.ts
new file mode 100644
index 0000000..de89992
--- /dev/null
+++ b/redux/cart/selectors.ts
@@ -0,0 +1,6 @@
+import { RootState } from '../store';
+
+//export const selectCart = (state: RootState) => state.cart;
+
+//export const selectCartItemById = (id: string) => (state: RootState) =>
+  //state.cart.items.find((obj: { id: string; }) => obj.id === id);
diff --git a/redux/cart/slice.ts b/redux/cart/slice.ts
new file mode 100644
index 0000000..0977a58
--- /dev/null
+++ b/redux/cart/slice.ts
@@ -0,0 +1,45 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { calcTotalPrice } from '../../utils/calcTotalPrice';
+import { getCartFromLS } from '../../utils/getCartFromLS';
+import { CartItem, CartSliceState } from './types';
+
+const initialState: CartSliceState = getCartFromLS();
+
+const cartSlice = createSlice({
+  name: 'cart',
+  initialState,
+  reducers: {
+    addItem(state, action: PayloadAction<CartItem>) {
+      const findItem = state.items.find((obj) => obj.id === action.payload.id);
+
+      if (findItem) {
+        findItem.count++;
+      } else {
+        state.items.push({
+          ...action.payload,
+          count: 1,
+        });
+      }
+
+      state.totalPrice = calcTotalPrice(state.items);
+    },
+    minusItem(state, action: PayloadAction<string>) {
+      const findItem = state.items.find((obj) => obj.id === action.payload);
+
+      if (findItem) {
+        findItem.count--;
+      }
+    },
+    removeItem(state, action: PayloadAction<string>) {
+      state.items = state.items.filter((obj) => obj.id !== action.payload);
+    },
+    clearItems(state) {
+      state.items = [];
+      state.totalPrice = 0;
+    },
+  },
+});
+
+export const { addItem, removeItem, minusItem, clearItems } = cartSlice.actions;
+
+export default cartSlice.reducer;
diff --git a/redux/cart/types.ts b/redux/cart/types.ts
new file mode 100644
index 0000000..9b9665a
--- /dev/null
+++ b/redux/cart/types.ts
@@ -0,0 +1,14 @@
+export type CartItem = {
+    id: string;
+    title: string;
+    price: number;
+    imageUrl: string;
+    type: string;
+    size: number;
+    count: number;
+  };
+
+  export interface CartSliceState {
+    totalPrice: number;
+    items: CartItem[];
+  }
diff --git a/redux/categories/index.ts b/redux/categories/index.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/redux/categories/index.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/redux/categories/selectors.ts b/redux/categories/selectors.ts
new file mode 100644
index 0000000..dfd5c73
--- /dev/null
+++ b/redux/categories/selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectCategoriesData = (state: RootState) => state.categories;
diff --git a/redux/categories/slice.ts b/redux/categories/slice.ts
new file mode 100644
index 0000000..a358d58
--- /dev/null
+++ b/redux/categories/slice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchCategories } from './stock';
+import { Categories, CategoriesSliceState, Status } from './types';
+
+const initialState: CategoriesSliceState = {
+    categories_items: [],
+    categories_status: Status.LOADING, // loading | success | error
+};
+
+const categoriesSlice = createSlice({
+  name: 'categories',
+  initialState,
+  reducers: {
+    setCategories(categories_status, action: PayloadAction<Categories[]>) {
+      categories_status.categories_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchCategories.pending, (categories_status, action) => {
+      categories_status.categories_status = Status.LOADING;
+      categories_status.categories_items = [];
+    });
+
+    builder.addCase(fetchCategories.fulfilled, (categories_status, action) => {
+      categories_status.categories_status = Status.SUCCESS;
+      categories_status.categories_items = action.payload;
+    });
+
+    builder.addCase(fetchCategories.rejected, (categories_status, action) => {
+      categories_status.categories_status = Status.ERROR;
+      categories_status.categories_items = [];
+    });
+  },
+});
+
+export const { setCategories } = categoriesSlice.actions;
+
+export default categoriesSlice.reducer;
diff --git a/redux/categories/stock.ts b/redux/categories/stock.ts
new file mode 100644
index 0000000..b8ffebd
--- /dev/null
+++ b/redux/categories/stock.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Categories } from './types';
+
+export const fetchCategories = createAsyncThunk(
+    'Categories/fetchCategoriesStatus',
+    async () => {
+      const { data } = await axios.get<Categories[]>(`/api/loadingCategories`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/redux/categories/types.ts b/redux/categories/types.ts
new file mode 100644
index 0000000..fb255bd
--- /dev/null
+++ b/redux/categories/types.ts
@@ -0,0 +1,15 @@
+export type Categories = {
+    type: string;
+    name: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface CategoriesSliceState {
+    categories_items: Categories[];
+    categories_status: Status;
+  }
diff --git a/redux/login/asyncActions.ts b/redux/login/asyncActions.ts
new file mode 100644
index 0000000..bfff294
--- /dev/null
+++ b/redux/login/asyncActions.ts
@@ -0,0 +1,31 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Token, LoginParams } from './types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+
+interface MyObj {
+  token: string;
+  error: string;
+}
+
+export const fetchToken = createAsyncThunk<Token[], LoginParams>(
+  'token/fetchTokenStatus',
+  async (params) => {
+    const { login, password } = params;
+    const { data } = await axios.post<Token[]>('/api/login', {
+      params: pickBy(
+        {
+          login: login,
+          password: password,
+        },
+        identity,
+      ),
+    });
+
+    let obj: MyObj = JSON.parse(JSON.stringify(data));
+    obj.token ? localStorage.setItem('token', JSON.stringify(obj.token)) : '';
+
+    return data;
+  },
+);
diff --git a/redux/login/selectors.ts b/redux/login/selectors.ts
new file mode 100644
index 0000000..8367793
--- /dev/null
+++ b/redux/login/selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectTokenData = (state: RootState) => state.token;
\ No newline at end of file
diff --git a/redux/login/slice.ts b/redux/login/slice.ts
new file mode 100644
index 0000000..3770146
--- /dev/null
+++ b/redux/login/slice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchToken } from './asyncActions';
+import { Token, LoginSliceState, Status } from './types';
+
+const initialState: LoginSliceState = {
+  token: [],
+  status_token: Status.LOADING, // loading | success | error
+};
+
+const tokenSlice = createSlice({
+  name: 'token',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Token[]>) {
+      state.token = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchToken.pending, (state, action) => {
+      state.token = [];
+      state.status_token = Status.LOADING;
+    });
+
+    builder.addCase(fetchToken.fulfilled, (state, action) => {
+      state.token = action.payload;
+      state.status_token = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchToken.rejected, (state, action) => {
+      state.status_token = Status.ERROR;
+      state.token = [];
+    });
+  },
+});
+
+export const { setItems } = tokenSlice.actions;
+
+export default tokenSlice.reducer;
diff --git a/redux/login/types.ts b/redux/login/types.ts
new file mode 100644
index 0000000..207d0ca
--- /dev/null
+++ b/redux/login/types.ts
@@ -0,0 +1,20 @@
+export interface Token {
+  token: string;
+  error: string;
+}
+
+export enum Status {
+  LOADING = 'loading_token',
+  SUCCESS = 'completed_token',
+  ERROR = 'error_token',
+}
+
+export interface LoginSliceState {
+  token: Token[];
+  status_token: Status;
+}
+
+export type LoginParams = {
+  login: string;
+  password: string;
+};
\ No newline at end of file
diff --git a/redux/pizza/index.ts b/redux/pizza/index.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/redux/pizza/index.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/redux/pizza/selectors.ts b/redux/pizza/selectors.ts
new file mode 100644
index 0000000..684912a
--- /dev/null
+++ b/redux/pizza/selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectPizzaData = (state: RootState) => state.pizza;
diff --git a/redux/pizza/slice.ts b/redux/pizza/slice.ts
new file mode 100644
index 0000000..b49901a
--- /dev/null
+++ b/redux/pizza/slice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizza } from './stock';
+import { Pizza, PizzaSliceState, Status } from './types';
+
+const initialState: PizzaSliceState = {
+    pizza_items: [],
+    pizza_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizza(pizza_status, action: PayloadAction<Pizza[]>) {
+      pizza_status.pizza_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizza.pending, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.LOADING;
+      pizza_status.pizza_items = [];
+    });
+
+    builder.addCase(fetchPizza.fulfilled, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.SUCCESS;
+      pizza_status.pizza_items = action.payload;
+    });
+
+    builder.addCase(fetchPizza.rejected, (pizza_status, action) => {
+      pizza_status.pizza_status = Status.ERROR;
+      pizza_status.pizza_items = [];
+    });
+  },
+});
+
+export const { setPizza } = pizzaSlice.actions;
+
+export default pizzaSlice.reducer;
diff --git a/redux/pizza/stock.ts b/redux/pizza/stock.ts
new file mode 100644
index 0000000..9d0d14e
--- /dev/null
+++ b/redux/pizza/stock.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Pizza } from './types';
+
+export const fetchPizza = createAsyncThunk(
+    'pizza/fetchPizzaStatus',
+    async () => {
+      const { data } = await axios.get<Pizza[]>(`/api/loadingPizzaCard`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/redux/pizza/types.ts b/redux/pizza/types.ts
new file mode 100644
index 0000000..0c5e8ec
--- /dev/null
+++ b/redux/pizza/types.ts
@@ -0,0 +1,18 @@
+export type Pizza = {
+    id: number;
+    title: string;
+    description: string;
+    price: number[];
+    img: string[];
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface PizzaSliceState {
+    pizza_items: Pizza[];
+    pizza_status: Status;
+  }
diff --git a/redux/pizzaToCart/index.ts b/redux/pizzaToCart/index.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/redux/pizzaToCart/index.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/redux/pizzaToCart/selectors.ts b/redux/pizzaToCart/selectors.ts
new file mode 100644
index 0000000..143c8a2
--- /dev/null
+++ b/redux/pizzaToCart/selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectPizzaToCartData = (state: RootState) => state.pizzaToCard;
diff --git a/redux/pizzaToCart/slice.ts b/redux/pizzaToCart/slice.ts
new file mode 100644
index 0000000..64ddaec
--- /dev/null
+++ b/redux/pizzaToCart/slice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchPizzaToCard } from './stock';
+import { PizzaToCard, PizzaToCardSliceState, Status } from './types';
+
+const initialState: PizzaToCardSliceState = {
+    pizzaToCard_items: [],
+    pizzaToCard_status: Status.LOADING, // loading | success | error
+};
+
+const pizzaToCardSlice = createSlice({
+  name: 'pizza',
+  initialState,
+  reducers: {
+    setPizzaToCard(pizzaToCard_status, action: PayloadAction<PizzaToCard[]>) {
+      pizzaToCard_status.pizzaToCard_items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPizzaToCard.pending, (pizzaToCard_status, action) => {
+      pizzaToCard_status.pizzaToCard_status = Status.LOADING;
+      pizzaToCard_status.pizzaToCard_items = [];
+    });
+
+    builder.addCase(fetchPizzaToCard.fulfilled, (pizzaToCard_status, action) => {
+      pizzaToCard_status.pizzaToCard_status = Status.SUCCESS;
+      pizzaToCard_status.pizzaToCard_items = action.payload;
+    });
+
+    builder.addCase(fetchPizzaToCard.rejected, (pizzaToCard_status, action) => {
+      pizzaToCard_status.pizzaToCard_status = Status.ERROR;
+      pizzaToCard_status.pizzaToCard_items = [];
+    });
+  },
+});
+
+export const { setPizzaToCard } = pizzaToCardSlice.actions;
+
+export default pizzaToCardSlice.reducer;
diff --git a/redux/pizzaToCart/stock.ts b/redux/pizzaToCart/stock.ts
new file mode 100644
index 0000000..91a01be
--- /dev/null
+++ b/redux/pizzaToCart/stock.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { PizzaToCard, GetPizzaParams } from './types';
+
+export const fetchPizzaToCard = createAsyncThunk<PizzaToCard[], GetPizzaParams>(
+    'pizzaToCard/fetchPizzaToCardStatus',
+    async (params) => {
+        const { id } = params;
+        const { data } = await axios.get<PizzaToCard[]>(`/api/loadingPizzaInformation/`+id);
+        return data;
+    },
+  );
\ No newline at end of file
diff --git a/redux/pizzaToCart/types.ts b/redux/pizzaToCart/types.ts
new file mode 100644
index 0000000..0776f78
--- /dev/null
+++ b/redux/pizzaToCart/types.ts
@@ -0,0 +1,24 @@
+export type PizzaToCard = {
+    id: number;
+    title: string;
+    heft: string[];
+    description: string;
+    img: string[];
+    price: string[];
+    size: string[];
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export type GetPizzaParams = {
+    id: number;
+  };
+
+  export interface PizzaToCardSliceState {
+    pizzaToCard_items: PizzaToCard[];
+    pizzaToCard_status: Status;
+  }
diff --git a/redux/search/slice.ts b/redux/search/slice.ts
new file mode 100644
index 0000000..1f52975
--- /dev/null
+++ b/redux/search/slice.ts
@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { FilterSliceState, Sort, SortPropertyEnum } from './types';
+
+const initialState: FilterSliceState = {
+  searchValue: '',
+  categoryId: 0,
+  currentPage: 1,
+  sort: {
+    name: 'популярности',
+    sortProperty: SortPropertyEnum.RATING_DESC,
+  },
+};
+
+const filterSlice = createSlice({
+  name: 'filters',
+  initialState,
+  reducers: {
+    setCategoryId(state, action: PayloadAction<number>) {
+      state.categoryId = action.payload;
+    },
+    setSearchValue(state, action: PayloadAction<string>) {
+      state.searchValue = action.payload;
+    },
+    setSort(state, action: PayloadAction<Sort>) {
+      state.sort = action.payload;
+    },
+    setCurrentPage(state, action: PayloadAction<number>) {
+      state.currentPage = action.payload;
+    },
+    setFilters(state, action: PayloadAction<FilterSliceState>) {
+      if (Object.keys(action.payload).length) {
+        state.currentPage = Number(action.payload.currentPage);
+        state.categoryId = Number(action.payload.categoryId);
+        state.sort = action.payload.sort;
+      } else {
+        state.currentPage = 1;
+        state.categoryId = 0;
+        state.sort = {
+          name: 'популярности',
+          sortProperty: SortPropertyEnum.RATING_DESC,
+        };
+      }
+    },
+  },
+});
+
+export const { setCategoryId, setSort, setCurrentPage, setFilters, setSearchValue } =
+  filterSlice.actions;
+
+export default filterSlice.reducer;
diff --git a/redux/search/types.ts b/redux/search/types.ts
new file mode 100644
index 0000000..9d9014e
--- /dev/null
+++ b/redux/search/types.ts
@@ -0,0 +1,20 @@
+export enum SortPropertyEnum {
+    RATING_DESC = 'rating',
+    RATING_ASC = '-rating',
+    TITLE_DESC = 'title',
+    TITLE_ASC = '-title',
+    PRICE_DESC = 'price',
+    PRICE_ASC = '-price',
+  }
+
+  export type Sort = {
+    name: string;
+    sortProperty: SortPropertyEnum;
+  };
+
+  export interface FilterSliceState {
+    searchValue: string;
+    categoryId: number;
+    currentPage: number;
+    sort: Sort;
+  }
\ No newline at end of file
diff --git a/redux/stoke/index.ts b/redux/stoke/index.ts
new file mode 100644
index 0000000..6934c6a
--- /dev/null
+++ b/redux/stoke/index.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './slice';
+export * from './stock';
+export * from './types';
\ No newline at end of file
diff --git a/redux/stoke/selectors.ts b/redux/stoke/selectors.ts
new file mode 100644
index 0000000..e9d5554
--- /dev/null
+++ b/redux/stoke/selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../store';
+
+export const selectStokeData = (state: RootState) => state.stoke;
diff --git a/redux/stoke/slice.ts b/redux/stoke/slice.ts
new file mode 100644
index 0000000..48dacb7
--- /dev/null
+++ b/redux/stoke/slice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchStoke } from './stock';
+import { Stoke, StockSliceState, Status } from './types';
+
+const initialState: StockSliceState = {
+  items: [],
+  status: Status.LOADING, // loading | success | error
+};
+
+const stokeSlice = createSlice({
+  name: 'stoke',
+  initialState,
+  reducers: {
+    setItems(state, action: PayloadAction<Stoke[]>) {
+      state.items = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchStoke.pending, (state, action) => {
+      state.status = Status.LOADING;
+      state.items = [];
+    });
+
+    builder.addCase(fetchStoke.fulfilled, (state, action) => {
+      state.items = action.payload;
+      state.status = Status.SUCCESS;
+    });
+
+    builder.addCase(fetchStoke.rejected, (state, action) => {
+      state.status = Status.ERROR;
+      state.items = [];
+    });
+  },
+});
+
+export const { setItems } = stokeSlice.actions;
+
+export default stokeSlice.reducer;
diff --git a/redux/stoke/stock.ts b/redux/stoke/stock.ts
new file mode 100644
index 0000000..7aadb7b
--- /dev/null
+++ b/redux/stoke/stock.ts
@@ -0,0 +1,12 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { Stoke } from './types';
+
+export const fetchStoke = createAsyncThunk(
+    'stoke/fetchStokeStatus',
+    async () => {
+      const { data } = await axios.get<Stoke[]>(`/api/loadingStock`);
+      console.log(data);
+      return data;
+    },
+  );
\ No newline at end of file
diff --git a/redux/stoke/types.ts b/redux/stoke/types.ts
new file mode 100644
index 0000000..dcd38bd
--- /dev/null
+++ b/redux/stoke/types.ts
@@ -0,0 +1,21 @@
+export type Stoke = {
+    id: number;
+    title_one: string;
+    title_two: string;
+    sale: string;
+    color: string;
+    img: string;
+    status: number;
+    adding_time: string;
+  };
+
+  export enum Status {
+    LOADING = 'loading',
+    SUCCESS = 'completed',
+    ERROR = 'error',
+  }
+
+  export interface StockSliceState {
+    items: Stoke[];
+    status: Status;
+  }
diff --git a/redux/store.ts b/redux/store.ts
new file mode 100644
index 0000000..cde1169
--- /dev/null
+++ b/redux/store.ts
@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit';
+//import filter from './filter/slice';
+import token from './login/slice';
+import stoke from './stoke/slice';
+import categories from './categories/slice'
+import pizza from './pizza/slice';
+import pizzaToCard from './pizzaToCart/slice'
+import { useDispatch } from 'react-redux';
+
+export const store = configureStore({
+  reducer: {stoke, token, categories, pizza, pizzaToCard},
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+
+type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/server/db/connect.ts b/server/db/connect.ts
new file mode 100644
index 0000000..612da2c
--- /dev/null
+++ b/server/db/connect.ts
@@ -0,0 +1,13 @@
+import mysql from "mysql2";
+
+var  pool = mysql.createPool({
+    host: process.env.HOST,
+    user: process.env.DATABASE,
+    database: process.env.DATABASE,
+    password: process.env.PASSWORD,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
+
+module.exports = pool;
\ No newline at end of file
diff --git a/server/types/customer.ts b/server/types/customer.ts
new file mode 100644
index 0000000..a769f30
--- /dev/null
+++ b/server/types/customer.ts
@@ -0,0 +1,9 @@
+  export interface BasicCustomer {
+    id: number,
+  }
+
+  export interface Customer extends BasicCustomer{
+    name: string,
+    email?: string,
+    password?: string
+  }
\ No newline at end of file
diff --git a/server/types/order.ts b/server/types/order.ts
new file mode 100644
index 0000000..68d0f25
--- /dev/null
+++ b/server/types/order.ts
@@ -0,0 +1,17 @@
+import {BasicProduct, Product} from "./product";
+import {BasicCustomer, Customer} from "./customer";
+
+export interface BasicOrder {
+  product: BasicProduct,
+  customer: BasicCustomer,
+  productQuantity: number
+}
+
+export interface Order extends BasicOrder {
+  orderId: number
+}
+
+export interface OrderWithDetails extends Order{
+  product: Product,
+  customer: Customer,
+}
\ No newline at end of file
diff --git a/server/types/product.ts b/server/types/product.ts
new file mode 100644
index 0000000..d9aa881
--- /dev/null
+++ b/server/types/product.ts
@@ -0,0 +1,10 @@
+export interface BasicProduct {
+    id: number,
+  }
+
+  export interface Product extends BasicProduct {
+    name: string,
+    description: string,
+    instockQuantity: number,
+    price: number
+  }
\ No newline at end of file
diff --git a/styles/Search.module.scss b/styles/Search.module.scss
new file mode 100644
index 0000000..5c1ae2c
--- /dev/null
+++ b/styles/Search.module.scss
@@ -0,0 +1,40 @@
+.root {
+    position: relative;
+    left: -120px;
+  }
+
+  .input {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 12px 20px;
+    padding-left: 42px;
+    width: 400px;
+    border-radius: 10px;
+    font-size: 16px;
+
+    &:focus {
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .icon {
+    width: 22px;
+    height: 22px;
+    opacity: 0.3;
+    position: absolute;
+    left: 14px;
+    top: 12px;
+  }
+
+  .clearIcon {
+    width: 18px;
+    height: 18px;
+    opacity: 0.3;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
\ No newline at end of file
diff --git a/styles/components/Box.scss b/styles/components/Box.scss
new file mode 100644
index 0000000..ceefb58
--- /dev/null
+++ b/styles/components/Box.scss
@@ -0,0 +1,11 @@
+  .vendor-list__ul {
+    padding-top: 16px;
+  }
+
+  @media (min-width: 640px) {
+    .vendor-list__ul {
+      padding-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/styles/components/Container.scss b/styles/components/Container.scss
new file mode 100644
index 0000000..0cef159
--- /dev/null
+++ b/styles/components/Container.scss
@@ -0,0 +1,15 @@
+.container{
+    overflow: auto;
+    padding: 10px;
+    width: 100%;
+}
+
+.box_scroll{
+    min-width: 404px;
+    display: flex;
+}
+
+.box_fix{
+    display: grid;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/styles/components/Header.scss b/styles/components/Header.scss
new file mode 100644
index 0000000..0f23ca2
--- /dev/null
+++ b/styles/components/Header.scss
@@ -0,0 +1,117 @@
+header{
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background-color:rgba(255, 255, 255, 1);
+    width:99.9%;
+    height:80px;
+    display: flex;
+
+    .block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        flex-direction: column;
+        justify-content: center;
+        /*align-items: center;*/
+        text-align: center;
+    }
+
+    .logo{
+        width: 170px;
+        background-color: initial;
+        border-radius: initial;
+    }
+
+    .address{
+        width: 100%;
+        /*padding: 0 32px; */
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .address_box {
+        display: flex;
+        margin-top: 0;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .input_address{
+        display: flex;
+        width: 100%;
+        height: auto;
+        background-color: initial;
+        border-radius: initial;
+        overflow: hidden;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        position: relative;
+        display: inline-block;
+        max-width: calc(100% - 10px);
+        border: none;
+        background-color: unset;
+    }
+
+    .input_address_box .icon:first-child {
+        left: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box .icon:last-child {
+        right: 7.5px;
+        position: absolute;
+        z-index: 9999;
+    }
+
+    .input_address_box input::after{
+        content: '<i class="fa fa-envelope icon"> ';
+    }
+
+    .icon_address{
+        margin-left: 2px;
+    }
+
+    .telephone{
+        width: 250px;
+        border-left: 1px solid #e3e4e6;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .telephone span {
+        color: #887D7D;
+        font-size: 13px;
+    }
+
+    .basket{
+        width: 75px;
+        border-right: 1px solid #e3e4e6;
+    }
+
+    .entrance{
+        width: 75px;
+    }
+
+    .icon{
+        height: 12px;
+        width: 10px;
+    }
+
+    .link{
+        margin-top: 5px;
+    }
+
+    .description{
+        font-size: 16px;
+    }
+
+    @media (max-width: 640px) {
+        .calk {
+            visibility: hidden;
+        }
+        .phone{
+            margin-top: 40px;
+        }
+      }
+
+}
\ No newline at end of file
diff --git a/styles/components/Login.scss b/styles/components/Login.scss
new file mode 100644
index 0000000..42cc1fc
--- /dev/null
+++ b/styles/components/Login.scss
@@ -0,0 +1,24 @@
+.wrapper_login{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+    .content {
+        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
+        background: #fff;
+        border-radius: 2px;
+        height: 390px;
+        position: relative;
+        width: 350px;
+        display:block;
+        padding: 20px;
+    }
+
+    .content:hover {
+        box-shadow: 0 14px 28px
+    rgba(0,0,0,0.25), 0 10px 10px
+    rgba(0,0,0,0.22);
+    }
+}
diff --git a/styles/components/UX/Button.scss b/styles/components/UX/Button.scss
new file mode 100644
index 0000000..d8b9bfb
--- /dev/null
+++ b/styles/components/UX/Button.scss
@@ -0,0 +1,105 @@
+$color_melon: #F5F1E1;
+$color_hover: #ac9437;
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.melon{
+  background-color: $color_melon;
+  height: 50px;
+  padding: 14px 22px;
+  min-width: 150px;
+  margin-right: 15px;
+}
+
+.button_size_32{
+  height: 32px;
+  margin-left: 5px;
+}
+
+.button_size_h_48{
+  height: 48px;
+  margin-left: 5px;
+}
+
+.button_size_48{
+  height: 48px;
+  width: 255px;
+  font-size: 18px;
+}
+
+
+
+.yellow{
+  background-color: $color_yellow;
+  padding: 5px 15px 5px 15px;
+}
+
+.none{
+  background-color: $color_none;
+  height: 32px;
+  padding: 5px 15px 5px 15px;
+}
+
+.button_align_right{
+  text-align: right;
+}
+
+.button_align_center{
+  text-align: center;
+}
+
+.button_box{
+  /*margin-bottom: 10px;*/
+}
+
+.button_border_radius_8{
+  border-radius: 8px;
+}
+
+.button_border_radius_30{
+  border-radius: 30px;
+}
+
+.button {
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+  margin-left: 5px;
+}
+
+.button:hover {
+  background-color: $color_hover;
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button:hover:after {
+  opacity: .5;
+}
+
+.button:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/styles/components/UX/ButtonImg.scss b/styles/components/UX/ButtonImg.scss
new file mode 100644
index 0000000..9d32ad1
--- /dev/null
+++ b/styles/components/UX/ButtonImg.scss
@@ -0,0 +1,61 @@
+.video{
+    background: url('/assets/img/video.png') 0% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.button_img_main{
+    margin-top: 10px;
+    text-align: left;
+}
+.button_img {
+  appearance: none;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  border-style: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+  display: inline-block;
+  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  height: 50px;
+  letter-spacing: normal;
+  line-height: 1.5;
+  outline: none;
+  overflow: hidden;
+  padding: 14px 30px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  transition: all .3s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.button_img:hover {
+  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: .35s;
+}
+
+.button_img:hover:after {
+  opacity: .5;
+}
+
+.button_img:active {
+  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
+  transform: translateY(2px);
+  transition-duration: .35s;
+}
+
+.button_img:active:after {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/styles/components/UX/Input.scss b/styles/components/UX/Input.scss
new file mode 100644
index 0000000..f6ba9e7
--- /dev/null
+++ b/styles/components/UX/Input.scss
@@ -0,0 +1,143 @@
+$color--white : #ffffff;
+$color--black : #000000;
+$color--light-grey : #E6E6E6;
+$color--grey : #CCCCCC;
+$color--dark-grey : #7B7B7B;
+$color--primary : #2AA1C0;
+$color--secondary : #0E647D;
+
+$text-color : $color--black;
+$line-color : $color--light-grey;
+$line-color-after : $color--primary;
+$label-color : $color--dark-grey;
+$label-color-after : $color--primary;
+
+
+.input {
+  position: relative;
+  z-index: 1;
+  margin : 1em 0;
+  display: inline-block;
+  width : 100%;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.input_field {
+  position: relative;
+  display: block;
+  float: right;
+  padding: 0.8em;
+  width: 60%;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: $label-color-after;
+  font-weight: 400;
+  -webkit-appearance: none; /* for box shadows to show on iOS */
+}
+
+.input_field:focus {
+  outline: none;
+}
+
+.input_label {
+  display: inline-block;
+  float: right;
+  padding: 0 1em;
+  width: 40%;
+  color: $label-color;
+  font-weight: 400;
+  font-size: 60.25%;
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.input_label_content {
+  position: relative;
+  display: block;
+  padding: 1.2em 0;
+  width: 100%;
+}
+
+/* Individual styles */
+
+/* Ruri */
+.input_field_mui {
+  width: 100%;
+  background: transparent;
+  padding: 0.5em 0;
+  font-size: 100%;
+  margin-bottom: 0em;
+  color: $text-color;
+}
+
+.input_label_mui {
+  width: 100%;
+  position: absolute;
+  opacity: 0.6;
+  text-align: left;
+  font-size: 1em;
+  padding: 10px 0 10px 0;
+  pointer-events: none;
+}
+
+.input_label_mui::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background: $line-color;
+  left: 0%;
+  top: 85%;
+}
+
+.input_label_mui::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  background: $line-color;
+  left: 45%;
+  top: 85%;
+  -webkit-transition: all 300ms ease-in-out;
+  -moz-transition: all 300ms ease-in-out;
+  -o-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+  // -webkit-transform-origin: 50% 100%;
+  // transform-origin: 50% 100%;
+  // -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
+  // transition: transform 0.3s, background-color 0.3s;
+}
+
+.input_label_content_mui {
+  padding: 0;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transition: -webkit-transform 0.3s, color 0.3s;
+  transition: transform 0.3s, color 0.3s;
+}
+
+.input_field_mui:focus + .input_label_mui::after,
+.input_filled .input_label_mui::after {
+  left: 0;
+  width: 100%;
+  background: $line-color-after;
+  // -webkit-transform: scale3d(1, 0.25, 1);
+  // transform: scale3d(1, 0.25, 1);
+}
+
+.input_field_mui:focus + .input_label_mui .input_label-content_mui,
+.input_filled .input_label_mui .input_label_content_mui {
+  width: 100%;
+  font-weight: bold;
+  color: $label-color-after;
+  -webkit-transform: translate3d(0, -1.5em, 0) scale3d(0.680, 0.680, 1);
+  transform: translate3d(0, -1.5em, 0) scale3d(0.680, 0.680, 1);
+}
diff --git a/styles/components/UX/PictureText.scss b/styles/components/UX/PictureText.scss
new file mode 100644
index 0000000..88ee530
--- /dev/null
+++ b/styles/components/UX/PictureText.scss
@@ -0,0 +1,19 @@
+.pictureText_main{
+    width: 240px;
+    height: 240px;
+    display: table;
+    float: left;
+    position: static;
+    text-align: center;
+    margin-left: 40px;
+
+
+    .text{
+        display:block;
+    }
+
+    .box{
+        width: 256px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/styles/components/block/CardBasketProduct.scss b/styles/components/block/CardBasketProduct.scss
new file mode 100644
index 0000000..4432e5f
--- /dev/null
+++ b/styles/components/block/CardBasketProduct.scss
@@ -0,0 +1,53 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+}
+
+.card_basket_product_img{
+    margin: 10px;
+}
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/styles/components/block/Cart.scss b/styles/components/block/Cart.scss
new file mode 100644
index 0000000..22e5154
--- /dev/null
+++ b/styles/components/block/Cart.scss
@@ -0,0 +1,139 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.cart{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/styles/components/block/Categories.scss b/styles/components/block/Categories.scss
new file mode 100644
index 0000000..7320f08
--- /dev/null
+++ b/styles/components/block/Categories.scss
@@ -0,0 +1,9 @@
+.categories_skeleton{
+    width: 120px;
+    height: 50px;
+    background: #f3f3f3;
+    border-radius: 14px;
+    position: relative;
+    display:inline-block;
+    margin-right: 15px;
+}
\ No newline at end of file
diff --git a/styles/components/block/DeliveryArea.scss b/styles/components/block/DeliveryArea.scss
new file mode 100644
index 0000000..e78ccbb
--- /dev/null
+++ b/styles/components/block/DeliveryArea.scss
@@ -0,0 +1,8 @@
+.title_delivery{
+    margin: 10px;
+    margin-bottom: 20px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
\ No newline at end of file
diff --git a/styles/components/block/Description.scss b/styles/components/block/Description.scss
new file mode 100644
index 0000000..e69de29
diff --git a/styles/components/block/Footer.scss b/styles/components/block/Footer.scss
new file mode 100644
index 0000000..72eefc0
--- /dev/null
+++ b/styles/components/block/Footer.scss
@@ -0,0 +1,45 @@
+.footer {
+    box-shadow:0px 0px 4px rgba(158, 159, 157, 1);
+    background: #534B4B;
+    color: #ffff;
+    width:100%;
+    height:80px;
+    display: table;
+
+    .footer_link {
+        color: #ffff;
+    }
+
+    .footer_block a:visited {
+        color: #ffff; /* Цвет посещенных ссылок */
+    }
+    .footer_block a:active {
+        color: #ffff; /* Цвет активных ссылок */
+    }
+
+    .footer_block {
+        float: left;
+        position: static;
+        display: flex;
+        height: 80px;
+        color: #ffff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    /* border: solid; */
+    }
+
+    .footer_feedback{
+        min-width: 375px;
+    }
+
+    .footer_compound{
+        width: calc(100% - 750px);
+        min-width: 375px;
+    }
+
+    .footer_about {
+        min-width: 375px;
+    }
+}
diff --git a/styles/components/block/FooterNav.scss b/styles/components/block/FooterNav.scss
new file mode 100644
index 0000000..8b529a6
--- /dev/null
+++ b/styles/components/block/FooterNav.scss
@@ -0,0 +1,66 @@
+.footer_nav {
+
+    .container_left{
+        width: 100%;
+        margin: 10px;
+    }
+
+.col {
+    height: auto;
+    margin-right: 4%;
+    float: left;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*padding: 0px 20px 20px 20px;*/
+
+    p {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        color: #000000;
+        margin: 0px 0px 20px 0px;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    li {
+        margin: 0px 0px 15px 0px;
+    }
+
+    ul li:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+    }
+}
+    hr {
+        border: 1px solid #8E8E93;
+        background-color:#8E8E93;
+        color: #8E8E93;
+        display: flow-root list-item;
+        margin-top: 20px;
+        margin-bottom: 50px;
+        height: 1px;
+        width: 100%;
+    }
+
+    .clearfix {
+        clear: both;
+    }
+
+    .telephone{
+        min-width: 200px;
+        height: auto;
+        box-sizing: border-box;
+    }
+
+}
\ No newline at end of file
diff --git a/styles/components/block/Motto.scss b/styles/components/block/Motto.scss
new file mode 100644
index 0000000..f110065
--- /dev/null
+++ b/styles/components/block/Motto.scss
@@ -0,0 +1,60 @@
+.icon_moped{
+    background: url('/asset/img/moped.svg') 100% 100% no-repeat;
+    height: 40px;
+    width: 55px;
+    margin-right: 5px;
+    margin-left: 1px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_fire{
+    background: url('/asset/img/fire.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.icon_phone{
+    background: url('/asset/img/phone.svg') 100% 100% no-repeat;
+    height: 45px;
+    width: 35px;
+    margin-right: 15px;
+    margin-left: 12px;
+    position: relative;
+    display: inline-block;
+}
+
+.title_header_box{
+    display: block;
+    margin-bottom: 10px;
+}
+
+.title_header{
+    display: flex;
+}
+
+@media (max-width: 940px) {
+    .title_header {
+        display: grid;
+    }
+  }
+
+.typography_box{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.typography_h1{
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 36px;
+    position: relative;
+    display: inline-block;
+}
+
diff --git a/styles/components/block/Stock.scss b/styles/components/block/Stock.scss
new file mode 100644
index 0000000..8d6b084
--- /dev/null
+++ b/styles/components/block/Stock.scss
@@ -0,0 +1,104 @@
+@import '../../libs/variables';
+
+.color_green{
+    background: $color_green;
+}
+
+.color_green_img{
+    background: url('/assets/img/01.png') 100% 100% no-repeat;
+    height: 100px;
+    width: 120px;
+}
+
+.color_pink_img{
+    background: url('/assets/img/02.png') 100% 100% no-repeat;
+    height: 160px;
+    width: 120px;
+}
+
+.color_red_img{
+    background: url('/assets/img/03.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_blue_img{
+    background: url('/assets/img/04.png') 100% 100% no-repeat;
+    height: 140px;
+    width: 120px;
+}
+
+.color_pink{
+    background: $color_pink;
+}
+
+.color_red{
+    background: $color_red;
+}
+
+.color_blue{
+    background: $color_blue;
+}
+
+.card_stoke_skeleton{
+    width: 245px;
+    height: 160px;
+    background: #f3f3f3;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+}
+
+.card_stock{
+    width: 245px;
+    min-width: 245px;
+    height: 160px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display:inline-block;
+
+    .title{
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.02em;
+        color: #FFFFFF;
+    }
+
+    .title_box{
+        display: inline-table;
+        position: absolute;
+        width: 200px;
+        padding-top: 20px;
+        padding-left: 20px;
+        z-index: 100;
+    }
+
+    .sale_box{
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 20px;
+        position: absolute;
+        bottom: 0px;
+        width: 74px;
+        height: 26px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        color: #4B90EB;
+    }
+
+    .img{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        border-radius: 14px;
+    }
+}
\ No newline at end of file
diff --git a/styles/components/container/ContainerTitle.scss b/styles/components/container/ContainerTitle.scss
new file mode 100644
index 0000000..e81749e
--- /dev/null
+++ b/styles/components/container/ContainerTitle.scss
@@ -0,0 +1,39 @@
+.container_main {
+    width: 100%;
+    padding: 20px;
+}
+
+.container_title {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 47px;
+    color: #051244;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    margin: 30px 0px 30px 0px;
+    left: 0px;
+}
+
+.container_child_box p {
+    display:block;
+    margin: 20px 0px;
+}
+
+.container_main .m_all {
+    display:block;
+    margin: 40px 0px;
+}
+
+.container_box{
+    display: table;
+    width: 100%;
+}
+
+.container_child_box{
+    float: left;
+    position: static;
+    width: calc(90% - 260px);
+    min-width: 300px;
+}
\ No newline at end of file
diff --git a/styles/globals.scss b/styles/globals.scss
new file mode 100644
index 0000000..f915365
--- /dev/null
+++ b/styles/globals.scss
@@ -0,0 +1,28 @@
+@font-face {
+  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
+  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Rubik';
+}
+
+@import './libs/ResetCss.scss';
+@import './components/block/Stock.scss';
+@import './components/Container.scss';
+@import './components/Header.scss';
+@import './components/Login.scss';
+@import './components/UX/Input.scss';
+@import './components/UX/Button.scss';
+@import './components/block/Motto.scss';
+@import './components/block/Categories.scss';
+@import './components/Box.scss';
+@import './components/UX/ButtonImg.scss';
+@import './components/UX/PictureText.scss';
+@import './components/container/ContainerTitle.scss';
+@import './components/block/Footer.scss';
+@import './components/block/FooterNav.scss';
+@import './components/block/DeliveryArea.scss';
+@import '../components/customer/pages/index/block/Pizza/styles/index.scss';
+@import '../components/customer/pages/index/modals/pizza/styles/index.scss';
+@import './components/block/Cart.scss';
+@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
diff --git a/styles/libs/ResetCss.scss b/styles/libs/ResetCss.scss
new file mode 100644
index 0000000..d9f8581
--- /dev/null
+++ b/styles/libs/ResetCss.scss
@@ -0,0 +1,80 @@
+/* Указываем box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Убираем внутренние отступы */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Убираем внешние отступы */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+  font-family: 'Rubik';
+}
+
+/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+a{
+    text-decoration: none; /* Отменяем подчеркивание у ссылки */
+    color: black; /* Цвет ссылок */
+    margin: 0;
+}
+a:visited {
+    color: black; /* Цвет посещенных ссылок */
+}
+a:active {
+    color: black; /* Цвет активных ссылок */
+}
+/* Упрощаем работу с изображениями */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Указываем понятную периодичность в потоке данных у article*/
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Наследуем шрифты для инпутов и кнопок */
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file
diff --git a/styles/libs/_variables.scss b/styles/libs/_variables.scss
new file mode 100644
index 0000000..fe45a7d
--- /dev/null
+++ b/styles/libs/_variables.scss
@@ -0,0 +1,4 @@
+$color_green : #9CC775;
+$color_pink : #FFB27C;
+$color_red: #83180E;
+$color_blue: #4B90EB;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..cab139f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lib/session.ss", "pages/api/loadingStock.js", "pages/api/loadingPizza.js", "pages/api/loadingCategories.js", "pages/api/loadingPizzaCard.js", "components/admin/pages/login/useToken.js", "components/admin/pages/login/NewPassword.js", "components/admin/pages/login/Entrance.js", "components/admin/pages/login/EnteringMail.js", "components/admin/pages/login/EnteringCode.js"],
+  "exclude": ["node_modules"]
+}
diff --git a/utils/calcTotalPrice.ts b/utils/calcTotalPrice.ts
new file mode 100644
index 0000000..e6d7420
--- /dev/null
+++ b/utils/calcTotalPrice.ts
@@ -0,0 +1,5 @@
+import { CartItem } from '../redux/cart/types';
+
+export const calcTotalPrice = (items: CartItem[]) => {
+  return items.reduce((sum, obj) => obj.price * obj.count + sum, 0);
+};
diff --git a/utils/getCartFromLS.ts b/utils/getCartFromLS.ts
new file mode 100644
index 0000000..8bf2d66
--- /dev/null
+++ b/utils/getCartFromLS.ts
@@ -0,0 +1,13 @@
+import { CartItem } from '../redux/cart/types';
+import { calcTotalPrice } from './calcTotalPrice';
+
+export const getCartFromLS = () => {
+  const data = localStorage.getItem('cart');
+  const items = data ? JSON.parse(data) : [];
+  const totalPrice = calcTotalPrice(items);
+
+  return {
+    items: items as CartItem[],
+    totalPrice,
+  };
+};
diff --git a/utils/math.ts b/utils/math.ts
new file mode 100644
index 0000000..ee12770
--- /dev/null
+++ b/utils/math.ts
@@ -0,0 +1,4 @@
+export function add(a: number, b: number) {
+    console.log(111);
+    return a + b;
+  }
\ No newline at end of file
diff --git a/utils/types.ts b/utils/types.ts
new file mode 100644
index 0000000..9c9d3ed
--- /dev/null
+++ b/utils/types.ts
@@ -0,0 +1,12 @@
+export interface DiscordUser {
+    id: string;
+    username: string;
+    avatar: string;
+    discriminator: string;
+    public_flags: number;
+    flags: number;
+    locale: string;
+    mfa_enabled: boolean;
+    premium_type: number;
+    avatarURL: string;
+  }
\ No newline at end of file